Vuetify Composables

Manual imports of Vuetify composables are no longer required; auto-import is enabled by default for:

• useDate
• useDefaults
• useDisplay
• useLayout
• useLocale
• useRtl
• useTheme
• useGoTo: from Vuetify v3.5.0+ (Polaris) and Vuetify Nuxt Module v0.13.2+
• useHotkey: from Vuetify v3.8.0+ and Vuetify Nuxt Module v0.19.0+
• useRules: from Vuetify v3.8.0+ and Vuetify Nuxt Module v0.19.0+
• useMask: from Vuetify v3.10.0+ and Vuetify Nuxt Module v0.19.0+

You can disable auto-import by setting moduleOptions.importComposables: false, or pass an array of composable names to import only those:

export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    moduleOptions: {
      importComposables: ['useDisplay', 'useTheme']
    }
  }
})

If you are using other composables that conflict with Vuetify's, you can enable moduleOptions.prefixComposables: true to prefix the Vuetify composables with V:

• useDate => useVDate
• useDefaults => useVDefaults
• useLayout => useVLayout
• useDisplay => useVDisplay
• useLocale => useVLocale
• useRtl => useVRtl
• useTheme => useVTheme
• useGoTo => useVGoTo: from Vuetify v3.5.0+ (Polaris) and Vuetify Nuxt Module v0.13.2+
• useHotkey => useVHotkey: from Vuetify v3.8.0+ and Vuetify Nuxt Module v0.19.0+
• useRules => useVRules: from Vuetify v3.8.0+ and Vuetify Nuxt Module v0.19.0+
• useMask => useVMask: from Vuetify v3.10.0+ and Vuetify Nuxt Module v0.19.0+

You can also pass an array of composable names to prefix only those:

export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    moduleOptions: {
      prefixComposables: ['useLayout', 'useTheme']
    }
  }
})

useLayout collision with Nuxt

Nuxt ships its own useLayout composable, which collides with Vuetify's on auto-import. Prefixing (prefixComposables: ['useLayout']) renames Vuetify's to useVLayout. If you would rather keep Vuetify's useLayout untouched and rename Nuxt's instead, use the imports:extend hook:

export default defineNuxtConfig({
  hooks: {
    'imports:extend'(imports) {
      const layout = imports.find(i => i.as === 'useLayout' && i.from === '#app/composables/layout')
      if (layout)
        layout.as = 'useNuxtLayout'
    },
  },
})

useRules

The useRules composable is available in Vuetify v3.8.0+ and is enabled by default for that version.

You can configure it using moduleOptions.enableRules and moduleOptions.rulesConfiguration:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    moduleOptions: {
      enableRules: true, // default true for Vuetify 3.8+
      rulesConfiguration: {
        fromLabs: true // default true until promotion
      }
    }
  }
})