Auto Import Components does not work with a dynamic component

[alekstar79]

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?

[atinux]

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

[alekstar79]

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]

@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.