Global Components

If you need to add some global component, use vuetifyOptions.components module option, it has been declared properly to have better DX.

Check the components definition.

You can also provide Aliasing & Virtual Components via vuetifyOptions.aliases module option to register components with a different name, only available for global components. The components require to be registered globally.

Examples

Register single component

Example registering a Vuetify global component, use singular name or array notation:

// Nuxt config file
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      components: 'VDialog' // or ['VDialog']
    }
  }
})

Register multiple components

Example registering multiple global components, use array notation:

// Nuxt config file
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      components: ['VDialog', 'VSheet']
    }
  }
})

Aliasing global component

Example registering a Vuetify global component with a different name (aliases):

// Nuxt config file
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      aliases: {
        MyButton: 'VBtn'
      }
    }
  }
})

The above example is equivalent to:

// Nuxt config file
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      aliases: {
        MyButton: 'VBtn'
      },
      components: 'VBtn'
    }
  }
})