Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Auto Import Components does not work with a dynamic component #167

Open
alekstar79 opened this issue Mar 15, 2021 · 3 comments
Open

Auto Import Components does not work with a dynamic component #167

alekstar79 opened this issue Mar 15, 2021 · 3 comments

Comments

@alekstar79
Copy link

For a while, I couldn't figure out where to write - in the bug report or in the feature request. And yet I decided to write here. Auto Import Components does not work with a dynamic component, or I do not know how to do it. To clarify what I mean:

<template>
    <v-container class="widget-page" justify-content-center>
            <swiper :options="options" @ready="onReady">
                <template v-for="module in modules">
                    <swiper-slide :key="module.id">
                        <component :is="module.component" @update="updateSwiper" />
                    </swiper-slide>
                </template>
            </swiper>
           ...
    </v-container>
</template>

And here in the directive of the 'is' comes the string designation of the required component, for example:
<component :is="widget-tiles">. In the components directory, there is a 'widget' directory, and in it the Tiles.vue file with the component, respectively. But the component is not loaded. Is it possible to implement this somehow or is this auto import module really unable to do this?

Copy link
Member

atinux commented Mar 15, 2021

Please provide a reproduction with https://nuxt.new

@alekstar79
Copy link
Author

alekstar79 commented Mar 16, 2021

In the sandbox, on a simple example, it turned out. So the problem is in my code. But I note that in the sandbox it is possible to emulate only a simple case. My app has about 200 custom components with deep nesting. Third-party components from node_modules are also actively used. And these third-party components are imported manually. There are several other aspects that could potentially have an impact. But to consider them here, as I think, does not make sense. I will add only two more strange points. The first thing is that the module for some reason refused to work on the default settings and I had to register a list of subdirectories with the prefix (the default pathPrefix did not work), but I could not achieve full functionality. Loaded, only those components that are directly specified in the template, and those that are passed as a string to the component are not. And second, with a self-written auto import, everything works perfectly:

                                                                                          plugins/common.js

import { upperFirst as uf, camelCase as cc } from 'lodash'
import Vue from 'vue'

...

(function(require) {
    const fix = f => uf(cc(f.replace(/^\.\//, '').replace(/\.\w+$/, '')))
    require.keys().map(f => Vue.component(fix(f), () => require(f)))
})(require.context('../components', true, /\.vue$/, 'lazy'))

...

I. e. from this code, you can see that there are no problems with the project structure and file naming. This code also uses the naming of components by file structure.

@nadar
Copy link

nadar commented Apr 20, 2021

@alekstar79 we have the same problem. Not sure you have the same problem, but by reading #13 i found out you can just use global: true then it should work, at least that help me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants