How to render components under sub directory?

[imtiazmahbub]

Hello,

Thank you for the Automagical package. It works perfectly for components those are directly inside /components directory.

However, the components inside subdirectories aren't found.
My component Clock resides inside /components/backend directory. What can be the solution?

Unknown custom element: <Clock> - did you register the component correctly? For recursive components, make sure to provide the "name" option

[aerophobic]

Hi @imtiazmahbub

Thank you for interest in this package. I'm happy that you like how it works 🙂

The way Nuxt is registering components respectively component names works a bit differently. Having a Clock.vue file as you do:

components/
    backend/
        Clock.vue
    awesome/
        One.vue
        Two.vue

ends up in a registered component called BackendClock, AwesomeOne and AwesomeTwo which can be used. If you want your component to be registered as Clock, you need to configure components in nuxt.config.js as following:

  components: [
    { path: '~/components/backend', pattern: '**/*.vue', prefix: '' },
    {
      path: '~/components/awesome',
      pattern: '**/*.vue',
      prefix: 'Special',
    },
  ],

This will eventually lead to be able to use <Clock />, <SpecialOne /> and <SpecialTwo />.

Let me know if this solved your issue.

[imtiazmahbub]

Awesome! Didn't know about Nuxt registers components that way.
And didn't expect a reply so soon. :-D
Thank you very much.

[aerophobic]

you are very welcome ☺

I'll close this issue. Feel free to comment on it or open a new one if you still experience issues