Importing several components gives error (Nuxt/Vue)-CodePudding

I'm importing several components within a certain directory and want to use this without having to specify each of the components when importing them. I'm doing this by having a index.js file within the component directory in question that looks like this:

import Component1 from './Component1'
import Component2 from './Component2'

export default {
    Component1,
    Component2
}

I'm then importing these components into a page component/template by doing this:

import components from '@/components/blocks';
export default {
    ...
    components: {
        ...components
    }
    ...
}

This seems to work, but I'm getting an error in the console stating:

[Vue warn]: Invalid component name: "_Ctor". Component names should conform to valid custom element name in html5 specification.

I want to avoid having to specify each of the components when importing them. I can live with having to specify them on export. Would that be possible while avoiding this error as well?

CodePudding user response：

If you already have a name of your components you need to remove underscore at the beginning of your component name or delete any spaces between words. Otherwise go and set your components name and it'll be solved

CodePudding user response：

Since quite some time already, you can have all of your components auto-imported as explained here: https://nuxtjs.org/tutorials/improve-your-developer-experience-with-nuxt-components/

You can lazy-load them, get them into a specific directory too if needed or even put them into various directories but still access them by using a top-level reference (flat structure basically).
This even works with dynamic components.

So, if your need is not beyond the scope provided by Nuxt, I recommend that you stick to this official implementation already baked-in for you!