#Global option on components

1 messages · Page 1 of 1 (latest)

umbral shard
#

If I had a ./components/ui/global/ directory how would I automatically load that?

The documentation tells me that:

You can also selectively register some components globally by placing them in a ~/components/global directory.
The global option can also be set per component directory.
https://nuxt.com/docs/guide/directory-structure/components

file: ./nuxt.config.ts

export default defineNuxtConfig({
  //...
  components: {
    global: true,
    dirs: ['~/components/ui/']
  },
  //...
});

In the current state it does not find my ./components/ui/global/ThePage.vue component

[Vue warn]: Failed to resolve component: the-page

I thought perhaps it might be something along these lines but couldn't get it to work

export default defineNuxtConfig({
  //...
  components: {
    global: true,
    dirs: [{
      global: true,
      '~/components/ui/'
    }]
  },
  //...
});
fossil beacon
#

You don't have to globally import your components, just use the regular auto imports.

When you're using auto imports you need to name the file like the folders before so it'd be UiGlobalThePage.vue

<UiGlobalThePage/>

Unless you got a very specific reason to use global components I'd stay away from them

attached is an example of how I do it

umbral shard
#

Thanks Ovab. Honestly I don't know where you got that information, maybe I just misunderstood when reading about 🤷‍♂️
I thought it just meant having a global folder, I didn't really want to have to name my components like that so I agree that it's better to use regular importing. This is my first time with Nuxt (any Nuxt). I appreciate the help.