Nuxt Layers and Module Hooks

You can load your Vuetify configuration using Nuxt Layers or using a custom module via vuetify:registerModule Nuxt Module Hook.

WARNING

If you're NOT using Nuxt ^3.8.1+, you should use // @ts-expect-error when using the vuetify:registerModule nuxt module hook, TypeScript will complain.

Nuxt Layers

Add your Vuetify configuration to a layer and then configure the module to use it:

// Nuxt config file
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  extends: ['my-awesome-vuetify-layer'],
  modules: ['vuetify-nuxt-module']
})

// Nuxt config file
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  extends: ['my-awesome-vuetify-layer'],
  modules: ['vuetify-nuxt-module']
})

Nuxt Module Hook

You can use a custom module to load your Vuetify configuration:

// Nuxt config file
import MyVuetifyModule from './modules/my-vuetify-module'

export default defineNuxtConfig({
  modules: [MyVuetifyModule, 'vuetify-nuxt-module']
})

// Nuxt config file
import MyVuetifyModule from './modules/my-vuetify-module'

export default defineNuxtConfig({
  modules: [MyVuetifyModule, 'vuetify-nuxt-module']
})

and your module will load your configuration via vuetify:registerModule Nuxt hook:

// modules/my-vuetify-module
export default defineNuxtModule({
  setup(_options, nuxt) {
    // If you're using Nuxt < 3.8.1, you should add a ts-expect-error here
    nuxt.hook('vuetify:registerModule', register => register({
      moduleOptions: {
        /* module specific options */
      },
      vuetifyOptions: {
        /* vuetify options */
      },
    }))
  },
})

// modules/my-vuetify-module
export default defineNuxtModule({
  setup(_options, nuxt) {
    // If you're using Nuxt < 3.8.1, you should add a ts-expect-error here
    nuxt.hook('vuetify:registerModule', register => register({
      moduleOptions: {
        /* module specific options */
      },
      vuetifyOptions: {
        /* vuetify options */
      },
    }))
  },
})