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']
    }
  }
})

By default (moduleOptions.prefixComposables: 'auto') the module prefixes a Vuetify composable with V only when its name is already taken by a Nuxt or Vue auto-import. Set moduleOptions.prefixComposables: true to prefix all of them instead:

• 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 4.5+ ships its own useLayout composable, which returns the resolved layout name. Vuetify's useLayout is unrelated — it exposes mainRect and mainStyles, and throws outside of <VApp>.

The default prefixComposables: 'auto' resolves this for you: Nuxt keeps useLayout, and Vuetify's is auto-imported as useVLayout. Nothing is prefixed on Nuxt versions that have no built-in useLayout.

Upgrading

If you used Vuetify's useLayout before this became the default, rename those call sites to useVLayout. TypeScript flags them, because Nuxt's composable returns a different type.

If you would rather keep Vuetify's useLayout under the bare name and rename Nuxt's instead, set prefixComposables: false and 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, ignored on Vuetify 4.2+
      }
    }
  }
})