--- url: /guide.md --- # Introduction This guide helps you get started with the Vuetify Nuxt Module, covering installation and configuration for your Nuxt project. ## Installation ### New Project The easiest way to start is by using the official Vuetify creator: ::: code-group ```bash [npm] npm create vuetify@latest -- --platform=nuxt ``` ```bash [yarn] yarn create vuetify --platform=nuxt ``` ```bash [pnpm] pnpm create vuetify --platform=nuxt ``` ```bash [bun] bun create vuetify --platform=nuxt ``` ::: You can also try it online on StackBlitz: ### Existing Project If you already have a Nuxt project, first install `vuetify` — it is a peer dependency, so you choose the major version (Vuetify 3 or 4): ::: code-group ```bash [npm] npm install -D vuetify ``` ```bash [yarn] yarn add -D vuetify ``` ```bash [pnpm] pnpm add -D vuetify ``` ```bash [bun] bun add -D vuetify ``` ::: Then add the module using `nuxt`: ::: code-group ```bash [npm] npx nuxt module add vuetify-nuxt-module ``` ```bash [yarn] yarn dlx nuxt module add vuetify-nuxt-module ``` ```bash [pnpm] pnpm dlx nuxt module add vuetify-nuxt-module ``` ```bash [bun] bun x nuxt module add vuetify-nuxt-module ``` ::: ## Usage ::: info `vuetify-nuxt-module` is strongly opinionated and has a built-in default configuration out of the box. You can use it without any configuration, and it will work for most use cases. ::: Add `vuetify-nuxt-module` module to `nuxt.config.ts` and configure it: ::: code-group ```ts [Minimal Setup] import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ modules: [ 'vuetify-nuxt-module' ], }) ``` ```ts [Custom Setup] import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ modules: [ 'vuetify-nuxt-module' ], vuetify: { moduleOptions: { styles: { colors: false } }, vuetifyOptions: { icons: 'unocss-mdi' } } }) ``` ::: ## Module Options Check out the type declaration [src/types.ts](https://github.com/vuetifyjs/nuxt-module/blob/main/src/types.ts). ```ts export interface ModuleOptions { moduleOptions?: MOptions /** * Vuetify options. * * You can inline the configuration or specify a file path: * `vuetifyOptions: './vuetify.options.ts'` * * The path should be relative to the root folder. */ vuetifyOptions?: string | VOptions } ``` ```ts export interface MOptions { /** * @default true */ importComposables?: boolean /** * If you are using another composables that collide with the Vuetify ones, * enable this flag to prefix them with `V`: * - `useLocale` -> `useVLocale` * - `useDefaults` -> `useVDefaults` * - `useDisplay` -> `useVDisplay` * - `useLayout` -> `useVLayout` * - `useRtl` -> `useVRtl` * - `useTheme` -> `useVTheme` * * @default false */ prefixComposables?: boolean /** * Vuetify styles. * Specify `none` to disable Vuetify styles. * * If you are using Vuetify 3, you can only use the `configFile` option. * * The `colors` and `utilities` options are only available for Vuetify 4. * * @see https://vuetifyjs.com/en/styles/entry-points/#individual-modules * * @default true */ styles?: true | 'none' | { configFile: string } | { colors?: boolean utilities?: boolean } /** * Disable the modern SASS compiler and API. * * The module will check for `sass-embedded` dev dependency: * - if `disableModernSassCompiler` is enabled, the module will configure the legacy SASS compiler. * - if `sass-embedded` dependency is installed, the module will configure the modern SASS compiler. * - otherwise, the module will configure the modern SASS API and will enable [preprocessorMaxWorkers](https://vitejs.dev/config/shared-options.html#css-preprocessormaxworkers), only if not configured from user land. * * @https://vitejs.dev/config/shared-options.html#css-preprocessoroptions * @see https://vitejs.dev/config/shared-options.html#css-preprocessormaxworkers * * @default false * @deprecated Vite 7 supports only the modern SASS compiler and API. */ disableModernSassCompiler?: boolean /** * Add Vuetify Vite Plugin `transformAssetsUrls`? * * You can extend the Vuetify `transformAssetsUrls`. * * @default true */ includeTransformAssetsUrls?: boolean | Record /** * Directives Vuetify Vite Plugin should ignore. * * @since v0.15.1 */ ignoreDirectives?: DirectiveName | DirectiveName[] /** * Vuetify SSR client hints. * * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints */ ssrClientHints?: { /** * Should the module reload the page on first request? * * @default false */ reloadOnFirstRequest?: boolean /** * Enable `Sec-CH-Viewport-Width` and `Sec-CH-Viewport-Height` headers? * * @see https://wicg.github.io/responsive-image-client-hints/#sec-ch-viewport-width * @see https://wicg.github.io/responsive-image-client-hints/#sec-ch-viewport-height * * @default false */ viewportSize?: boolean /** * Enable `Sec-CH-Prefers-Color-Scheme` header? * * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme * * @default false */ prefersColorScheme?: boolean /** * The options for `prefersColorScheme`, `prefersColorScheme` must be enabled. * * If you want the module to handle the color scheme for you, you should configure this option, otherwise you'll need to add your custom implementation. */ prefersColorSchemeOptions?: { /** * The name for the cookie. * * @default 'color-scheme' */ cookieName?: string /** * The name for the dark theme. * * @default 'dark' */ darkThemeName?: string /** * The name for the light theme. * * @default 'light' */ lightThemeName?: string /** * Use the browser theme only? * * This flag can be used when your application provides a custom dark and light themes, * but will not provide a theme switcher, that's, using by default the browser theme. * * @default false */ useBrowserThemeOnly?: boolean } /** * Enable `Sec-CH-Prefers-Reduced-Motion` header? * * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion * * @default false */ prefersReducedMotion?: boolean } } ``` ```ts export interface VOptions extends Partial> { /** * Configure the SSR options. * * This option is only used when SSR is enabled in your Nuxt configuration. */ ssr?: { clientWidth: number clientHeight?: number } aliases?: Record /** * Do you need to configure some global components?. * * @default false */ components?: Components /** * Configure the locale messages, the locale, the fallback locale and RTL options. * * When `@nuxtjs/i18n` Nuxt module is present, the following options will be ignored: * - `locale` * - `fallback` * - `rtl` * - `messages` * * The adapter will be `vuetify`, if you want to use another adapter, check `date` option. */ locale?: Omit & RtlOptions /** * Include locale messages? * * When `@nuxtjs/i18n` Nuxt module is present, this option will be ignored. * * You can include the locales you want to use in your application, this module will load and configure the messages for you. */ localeMessages?: VuetifyLocale | VuetifyLocale[] /** * Include the lab components? * * You can include all lab components configuring `labComponents: true`. * * You can provide an array with the names of the lab components to include. * * @see https://vuetifyjs.com/en/labs/introduction/ * * @default false */ labComponents?: LabComponents /** * Include the directives? * * You can include all directives configuring `directives: true`. * * You can provide an array with the names of the directives to include. * * @default false */ directives?: Directives /** * Date configuration. * * When this option is configured, the `v-date-picker` lab component will be included. * * @see https://vuetifyjs.com/features/dates/ * @see https://vuetifyjs.com/components/date-pickers/ */ date?: DateOptions /** * Include the icons? * * By default, `mdi` icons will be used via cdn: https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css. * * @see https://vuetifyjs.com/en/features/icon-fonts/ */ icons?: false | IconsOptions } ``` ::: warning You don't need to install any [Vuetify Vite Plugin](https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin), the module will throw an error if any Vuetify Vite Plugin is installed in your Nuxt configuration. ::: --- --- url: /guide/getting-started/compatibility.md --- # Compatibility ## Version Requirements The Vuetify Nuxt Module is designed to work with **Nuxt** `^3.15.0` (including Nuxt 4 support), **Vuetify** `^3.8.0`, and **@nuxtjs/i18n** `^9.0.0`. ::: info Builder Support Please note that this module is intended to use with **Vite**. Support for Webpack and Rspack is not available. ::: ## Compatibility Matrix --- --- url: /guide/getting-started/migration.md --- # Migrating from 0.19.x to 1.0.0 This guide covers the changes you need to make when upgrading from `0.19.x` to `1.0.0`. It is organized so you can work through it top to bottom: 1. **Installation changes** — what to install before anything else. 2. **Breaking option changes** — options that were removed, and require action. 3. **Deprecated options** — options that still work but should be updated. 4. **New options** — additive options you may want to adopt. 5. **Type-only changes** — annotations that changed without affecting runtime. A condensed [checklist](#migration-checklist) is at the end. ## Installation changes ### `vuetify` is now a peer dependency In `0.19.x` the module shipped `vuetify` as a direct dependency, so it was installed transitively. In `1.0.0`, `vuetify` is a **peer dependency** (`^3.4.0 || ^4.0.0`) — you must install it yourself. ::: code-group ```bash [pnpm] pnpm add -D vuetify ``` ```bash [npm] npm i -D vuetify ``` ```bash [yarn] yarn add -D vuetify ``` ::: The module now supports both **Vuetify 3** and **Vuetify 4**. See the [Compatibility Matrix](/guide/getting-started/compatibility) for the supported tooling baseline (Nuxt `^3.15.0` / Nuxt 4, Vite 7, Node 22+). ::: info Internally the module swapped `vite-plugin-vuetify` for `@vuetify/loader-shared` and `@vuetify/unplugin-styles`. No action is needed — adding `vite-plugin-vuetify` to your own Vite config was never supported (the module throws if it detects it), so nothing changes for your configuration. ::: ## Breaking option changes These options were removed or changed type. They require action when upgrading. ### `disableVuetifyStyles` removed Use `styles: 'none'` instead. ::: code-group ```ts [Before (0.19.x)] export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { moduleOptions: { disableVuetifyStyles: true, }, }, }) ``` ```ts [After (1.0.0)] export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { moduleOptions: { styles: 'none', }, }, }) ``` ::: ### `styles: 'sass'` removed The `'sass'` shortcut, which loaded Vuetify's raw SASS sources so you could override variables, has been removed. To customize SASS variables, point `styles.configFile` at your settings file. ::: code-group ```ts [Before (0.19.x)] export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { moduleOptions: { styles: 'sass', }, }, }) ``` ```ts [After (1.0.0)] export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { moduleOptions: { styles: { configFile: 'assets/settings.scss', }, }, }, }) ``` ::: See [SASS Customization](/guide/styling/sass) for how to author the settings file. ## Deprecated options These options still work in `1.0.0` but are deprecated. Update them now to avoid surprises in a future release. ### `styles.experimental.cache` → `styles.cache` ::: code-group ```ts [Before (0.19.x)] export default defineNuxtConfig({ vuetify: { moduleOptions: { styles: { configFile: 'assets/settings.scss', experimental: { cache: true, }, }, }, }, }) ``` ```ts [After (1.0.0)] export default defineNuxtConfig({ vuetify: { moduleOptions: { styles: { configFile: 'assets/settings.scss', cache: true, }, }, }, }) ``` ::: `styles.cache` also accepts an object for finer control: ```ts styles: { configFile: 'assets/settings.scss', cache: { path: 'node_modules/.cache/vuetify-nuxt-module/styles', sassOptions: {}, }, } ``` See [Caching](/guide/styling/caching) for details. ### `prefersColorSchemeOptions.cookieName` → `cookie.name` The flat `cookieName` was replaced by a nested `cookie` object so you can configure the cookie's `domain`, `secure`, and `sameSite` attributes too. ::: code-group ```ts [Before (0.19.x)] export default defineNuxtConfig({ vuetify: { moduleOptions: { ssrClientHints: { prefersColorScheme: true, prefersColorSchemeOptions: { cookieName: 'color-scheme', }, }, }, }, }) ``` ```ts [After (1.0.0)] export default defineNuxtConfig({ vuetify: { moduleOptions: { ssrClientHints: { prefersColorScheme: true, prefersColorSchemeOptions: { cookie: { name: 'color-scheme', }, }, }, }, }, }) ``` ::: ### `disableModernSassCompiler` deprecated Vite 7 supports only the modern SASS compiler and API, so this flag no longer has any effect. Remove it from your config. ```ts export default defineNuxtConfig({ vuetify: { moduleOptions: { // disableModernSassCompiler: true, // [!code --] remove }, }, }) ``` ## New options These are additive and optional — adopt them if useful. ### `styles.cache` object form Beyond `styles.cache: true`, you can pass `{ path?, sassOptions? }` to control the cache location and SASS options (see [Caching](/guide/styling/caching)). ### `styles: { colors, utilities }` (Vuetify 4 only) When using **Vuetify 4**, you can toggle the standard colors palette and utilities directly: ```ts export default defineNuxtConfig({ vuetify: { moduleOptions: { styles: { colors: false, utilities: false, }, }, }, }) ``` ::: info These are only available for **Vuetify 4**. On Vuetify 3, use `configFile` for style customization. See [Common Setup](/guide/styling/common-setup). ::: ### `rulesConfiguration.configFile` The rules configuration gained a `configFile` option, and `fromLabs` is now optional: ```ts export default defineNuxtConfig({ vuetify: { moduleOptions: { enableRules: true, rulesConfiguration: { fromLabs: true, configFile: 'rules.config.ts', }, }, }, }) ``` ### `prefersColorSchemeOptions.cookie` attributes The new `cookie` object supports `domain`, `secure`, and `sameSite` — useful for sharing the color-scheme cookie across subdomains: ```ts export default defineNuxtConfig({ vuetify: { moduleOptions: { ssrClientHints: { prefersColorScheme: true, prefersColorSchemeOptions: { cookie: { name: 'color-scheme', domain: '.example.com', secure: true, sameSite: 'lax', }, }, }, }, }, }) ``` ## Type-only changes These changed only at the TypeScript level. Runtime behavior is unchanged, so **no migration is required** — your existing configuration keeps working. ### `vuetifyOptions.date.formats` The type was tightened from `Record` to `Record`. Nothing changed at runtime: the module serializes the `date` option with `JSON.stringify` and passes it to Vuetify verbatim, exactly as before. What this means by adapter: * **Default `vuetify` adapter:** format values should be `Intl.DateTimeFormatOptions`. Plain strings were never applied by this adapter anyway, so the previous `string` type was misleading. * **`@date-io` adapters** (`date-fns`, `luxon`, `dayjs`, `moment`): format values are the library's token strings (e.g. `'yyyy-MM-dd'`) and still work at runtime. The new type does not cover this case, so you may need to cast (e.g. `as any`) until the typing is revisited. ## Migration checklist * \[ ] Install `vuetify` as a direct dependency (it is now a peer dependency). * \[ ] Replace `moduleOptions.disableVuetifyStyles: true` with `styles: 'none'`. * \[ ] Replace `moduleOptions.styles: 'sass'` with `styles: { configFile: '...' }`. * \[ ] Move `styles.experimental.cache` to `styles.cache`. * \[ ] Move `ssrClientHints.prefersColorSchemeOptions.cookieName` to `cookie.name`. * \[ ] Remove `moduleOptions.disableModernSassCompiler`. --- --- url: /guide/configuration/vuetify-options.md --- # Vuetify Options You can register Vuetify options using a separate file. Please ensure the file path is relative to the root folder. Support for Nuxt Layers is also available; the module scans for `vuetify.config` files with the following extensions: `js`, `mjs`, `cjs`, `ts`, `cts`, and `mts`. During development, the module monitors Vuetify configuration files, focusing on those outside `node_modules`. ::: warning CAVEATS Modifying the Vuetify configuration during development triggers a full client page reload to pick up the new options — including under SSR, where the server-rendered output is refreshed without restarting the dev server (Nuxt `>= 3.18`, i.e. the Vite 7 line, and all of Nuxt 4). On Nuxt 3.15–3.17 (Vite 6), SSR falls back to a full dev-server restart. Under SSR, hot-reload covers the core options — `theme`, `defaults`, `components`, `aliases`, `directives`, and locale messages. A few changes still need a manual dev-server restart to take effect: the **icon CDN / local CSS** `` links (the reload intentionally skips re-applying `nuxt.options` to avoid a slower full server reload), and **icon-set / date-adapter** changes (their server-rendered modules are not re-evaluated on the fly by the dev SSR runtime). ::: For example, you can configure: ::: code-group ```ts [nuxt.config.ts] import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ modules: [ 'vuetify-nuxt-module' ], vuetify: { moduleOptions: { /* module specific options */ }, vuetifyOptions: './vuetify.config.ts' // <== you can omit it } }) ``` ::: and then use `defineVuetifyConfiguration` in your `vuetify.config` file: ::: code-group ```ts [vuetify.config.ts] import { defineVuetifyConfiguration } from 'vuetify-nuxt-module/custom-configuration' export default defineVuetifyConfiguration({ /* vuetify options */ }) ``` ::: or just using object notation: ::: code-group ```ts [vuetify.config.ts] import type { ExternalVuetifyOptions } from 'vuetify-nuxt-module' export default { /* vuetify options */ } satisfies ExternalVuetifyOptions ``` ::: If you prefer, you can omit `vuetifyOptions` and add one of the following files; the module will load it automatically: * `vuetify.config.js` * `vuetify.config.cjs` * `vuetify.config.mjs` * `vuetify.config.ts` * `vuetify.config.cts` * `vuetify.config.mts` To prevent the module from loading your configuration file, you can set `config: false` in your configuration: ::: code-group ```ts [vuetify.config.ts] import { defineVuetifyConfiguration } from 'vuetify-nuxt-module/custom-configuration' export default defineVuetifyConfiguration({ config: false /* other vuetify options */ }) ``` ::: or using object notation: ::: code-group ```ts [vuetify.config.ts] import type { ExternalVuetifyOptions } from 'vuetify-nuxt-module' export default { config: false /* vuetify options */ } satisfies ExternalVuetifyOptions ``` ::: --- --- url: /guide/configuration/blueprints.md --- # Vuetify Blueprints The module supports Vuetify Blueprints. You can enable them by adding the `vuetifyOptions.blueprint` module option. Please note the following limitations: * The `ssr` option is ignored; this flag is managed internally by the module based on the Nuxt `ssr` option. * The `components` option is ignored; please configure components using the `vuetifyOptions.components` module option. * The `directives` option is ignored; please configure directives using the `vuetifyOptions.directives` module option. * The `locale` option is ignored; please configure it using the `vuetifyOptions.locale` module option. * The `date` option is ignored; please configure it using the `vuetifyOptions.date` module option. * The `icons` option is ignored; please configure it using the `vuetifyOptions.icons` module option. * The `aliases` option only supports defining aliases with [strings](/guide/features/globals/global-components.html#aliasing-global-component). Using a component type will result in an error (`Cannot start nuxt: Unexpected token '.'`). --- --- url: /guide/configuration/transform-assets.md --- # Transform Asset URLs The module automatically configures `transformAssetUrls` from the [Vuetify Vite Plugin](https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#image-loading) to resolve relative asset URLs passed to Vuetify components, such as `VImg` (e.g., `~/assets/img/some.png`). You can customize this behavior by adding entries to the `includeTransformAssetsUrls` module option (for example, to include external components) or by disabling the option to exclude all entries. The module will include the following normalizations for each entry in the `includeTransformAssetsUrls` module option: * Adds kebab and pascal case entries (if missing from the original). * Adds kebab and camel case and bind (`:xxx`) attrs entries (if missing from original). * Excludes normalizations on original attrs entries containing `:` (for example `xlink:href`). --- --- url: /guide/styling/common-setup.md --- # Common Setup The `styles` option in `moduleOptions` allows you to configure how Vuetify styles are handled. ## Configuration You can configure the styles using the `styles` property in `moduleOptions`. ### Basic Usage By default, styles are enabled (`true`). To disable them, you can set `styles` to `'none'`. ```ts export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { moduleOptions: { styles: 'none' } } }) ``` ### Vuetify 4 Features If you are using Vuetify 4, you can configure specific style features such as `colors` and `utilities`. * `colors`: Enable/disable the standard colors palette. Default: `true`. * `utilities`: Enable/disable the standard utilities. Default: `true`. ::: info These options are only available for **Vuetify 4**. If you are using Vuetify 3, you should use the `configFile` option for customization. ::: ```ts export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { moduleOptions: { styles: { colors: false, utilities: false } } } }) ``` ### SASS Customization If you wish to customize SASS variables (Vuetify 3+), you can provide a `configFile` path. This allows you to override global and component-level variables. See [SASS Customization](/guide/styling/sass) for a detailed guide. ```ts export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { moduleOptions: { styles: { configFile: 'assets/settings.scss' } } } }) ``` When using `configFile`, you can also enable [Experimental Caching](/guide/styling/caching) to improve build performance. --- --- url: /guide/styling/sass.md --- # SASS Customization Starting from version `0.17.0`, this module configures Nuxt to use the SASS modern compiler (`modern-compiler`) by default. For the best compatibility and performance, it is recommended to replace your `sass` dependency with `sass-embedded`. Please check [Build Performance](https://vuetifyjs.com/en/features/sass-variables/#build-performance) in the Vuetify documentation for more details. ## Overriding SASS Variables Vuetify allows for [overriding global and component-level SASS variables](https://vuetifyjs.com/en/features/sass-variables/). When using this Nuxt module, the configuration differs slightly from the standard Vuetify documentation. 1. In your styles directory (for this example, we'll use `${srcDir}/assets/css`), create two files: `${srcDir}/assets/css/globals.scss` and `${srcDir}/assets/css/components.scss`. 2. In the `globals.scss` file, add the following content: ::: code-group ```scss [globals.scss] @use 'vuetify' with ( // Global Vuetify SASS variable overrides. For example: // $utilities: false, // $reset: false, // $color-pack: false, // $body-font-family: sans-serif ) ``` ::: 3. In the `components.scss` file, add the following content: ::: code-group ```scss [components.scss] // $button-text-transform-override: capitalize; @forward 'vuetify/settings' with ( // Component Vuetify SASS variable overrides. See https://vuetifyjs.com/en/features/sass-variables/#variable-api // For example -- overriding button font capitalization (as seen at the bottom of the v-btn guide here https://vuetifyjs.com/en/api/v-btn/): // $button-text-transform: $button-text-transform-override, ); ``` ::: 4. In your `nuxt.config.ts`, add a `css` entry to the `defineNuxtConfig` configuration object that points to `globals.scss`, as shown below: ::: code-group ```ts [nuxt.config.ts] export default defineNuxtConfig({ css: ['@/assets/css/globals.scss'] // other options }) ``` ::: > \[!TIP] > The [css](https://nuxt.com/docs/getting-started/styling#the-css-property) property within your `defineNuxtConfig` will import all styles from the file that you specify (in our case, `globals.scss`) into all components for convenience. Any styles appended to the `globals.scss` file in addition to the Vuetify Global Variables override will also be imported into all of your components. If you would like more fine-grained control, consider using a different file for your non-Vuetify global styles, like a separate `main.scss` that you import on a component-by-component basis. You should now be able to override your [global Vuetify SASS variables](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_variables.scss) as well as your [component-level Vuetify SASS variables](https://vuetifyjs.com/en/features/sass-variables/#variable-api). For a full list of variables, please check [all of the imports in the index](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_index.sass). --- --- url: /guide/styling/caching.md --- # Experimental Cache When using a custom SASS configuration (`configFile`), Vuetify compiles SASS variables for every component. This process can sometimes slow down development startup and Hot Module Replacement (HMR). To help improve performance, this module offers an experimental caching mechanism. ## Enabling Cache You can enable the experimental cache in your `nuxt.config.ts` as follows: ```ts export default defineNuxtConfig({ vuetify: { moduleOptions: { styles: { configFile: 'assets/settings.scss', experimental: { cache: true } } } } }) ``` ## How it works When enabled, the module performs the following steps: 1. Calculates a hash based on your: * Vuetify version * Vite version * Content of your SASS config file 2. Checks if a cache exists for this hash in `node_modules/.cache/vuetify-nuxt-module/styles`. 3. If not found, it pre-compiles all Vuetify styles with your SASS variables into CSS files and stores them in the cache directory. 4. Serves these cached CSS files directly during development, bypassing the SASS compilation step. ## Benefits * **Faster Startup**: Initial compilation happens once. Subsequent starts are instant. * **Faster HMR**: Changing Vue files doesn't trigger SASS recompilation for Vuetify styles. * **Persistent**: Cache survives server restarts. ## Invalidation The cache is automatically invalidated (recreated) if: * You update Vuetify or Vite. * You modify your SASS configuration file. You can also manually clear the cache by deleting the `node_modules/.cache/vuetify-nuxt-module` directory. --- --- url: /guide/styling/other-frameworks.md --- # Other Frameworks Integrating Vuetify with utility-first CSS frameworks like Tailwind CSS or UnoCSS can significantly reduce your bundle size and provide a more flexible styling system. This approach allows you to leverage the best of both worlds: Vuetify's comprehensive component library and the modern, utility-first styling capabilities of other frameworks. ## New Project The easiest way to start a new project with Vuetify and a CSS utility framework is to use the official scaffolding tool. ```bash pnpm create vuetify --platform nuxt # or npm create vuetify --platform nuxt # or yarn create vuetify --platform nuxt ``` During the setup process, you can select **Nuxt** as the preset and then choose **UnoCSS** or **Tailwind CSS** as an optional module. This will automatically configure the project with the selected framework. ## Integration Guides For detailed instructions and best practices on integrating Vuetify with existing projects or new setups, please refer to the following official resources: * [CSS Utilities - Integration with existing projects](https://vuetifyjs.com/en/features/css-utilities/overview/#integration-with-existing-projects) * [Build with Nuxt and UnoCSS](https://vuetifyjs.com/en/blog/building-with-nuxt-and-unocss/) --- --- url: /guide/features/globals.md --- # Globals The module will enable automatic tree shaking for Vuetify components. You don't need to install any Vuetify Vite Plugin (the module will throw an error if any Vuetify Vite Plugin is installed in your Nuxt configuration): * the module will provide auto-import support via `vuetify/dist/json/importMap.json` json file and Nuxt `components:extend` hook. * the module will register a custom Vite Plugin for Vuetify styles: it is just a copy from the original Vuetify Vite Styles Plugin, changing some virtual names mappings and handling SSR flags. * the module supports [Component Labs](https://vuetifyjs.com/en/labs/introduction/) auto-import. You can register the following Vuetify components globally: * [Global Components](/guide/features/globals/global-components) * [Directives](/guide/features/globals/directives) * [Lab Components](/guide/features/globals/lab-components) * [Composables](/guide/features/globals/composables) --- --- url: /guide/features/globals/global-components.md --- # Global Components If you need to add global components, you can use the `vuetifyOptions.components` module option, which is designed for a better developer experience. Please check the [components definition](https://github.com/vuetifyjs/nuxt-module/blob/main/src/types.ts#L136-L137) for more details. You can also provide [Aliasing & Virtual Components](https://vuetifyjs.com/en/features/aliasing/#virtual-component-defaults) via the `vuetifyOptions.aliases` module option to register components with a different name. Note that this is available only for globally registered components. ## Examples ### Register single component Here is an example of registering a Vuetify global component using either the singular name or array notation: ::: code-group ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { components: 'VDialog' // or ['VDialog'] } } }) ``` ::: ### Register multiple components Here is an example of registering multiple global components using array notation: ::: code-group ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { components: ['VDialog', 'VSheet'] } } }) ``` ::: ### Aliasing global component Here is an example of registering a Vuetify global component with a different name (alias): ::: code-group ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { aliases: { MyButton: 'VBtn' } } } }) ``` ::: The above example is equivalent to: ::: code-group ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { aliases: { MyButton: 'VBtn' }, components: 'VBtn' } } }) ``` ::: --- --- url: /guide/features/globals/directives.md --- # Directives By default, the module does not register any Vuetify directives. If you need to register specific directives, you can use the `vuetifyOptions.directives` module option, which is designed for a better developer experience. You can register all directives or only the ones you need. Please check the [directives definition](https://github.com/vuetifyjs/nuxt-module/blob/main/src/types.ts#L138-L139) for more details. ## Ignore directives If you wish to ignore certain directives, you can use the `moduleOptions.ignoreDirectives` option. The module will then configure the Vuetify Vite Plugin to [ignore](https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#ignoring-components-or-directives) the specified directives. ## Examples ### Registering all the directives Here is an example of registering all Vuetify directives: ::: code-group ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { directives: true } } }) ``` ::: ### Registering one directive Here is an example of registering a single Vuetify directive using either the singular name or array notation: ::: code-group ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { directives: 'Ripple' // or ['Ripple'] } } }) ``` ::: ### Registering multiple directives Here is an example of registering multiple Vuetify directives using array notation: ::: code-group ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { directives: ['Ripple', 'Resize'] } } }) ``` ::: --- --- url: /guide/features/globals/lab-components.md --- # Lab Components ::: info The module supports auto-import for [labs components](https://vuetifyjs.com/en/labs/introduction/), allowing you to use them on demand. ::: The module supports Vuetify [labs components](https://vuetifyjs.com/en/labs/introduction/) via the `vuetifyOptions.labsComponents` module option, designed for a better developer experience. You can register all lab components or only the ones you need. Please check the [lab component definition](https://github.com/vuetifyjs/nuxt-module/blob/main/src/types.ts#L140-L141) for more details. ## Examples ### Registering all the lab components Here is an example of registering all Vuetify lab components: ::: code-group ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { labComponents: true } } }) ``` ::: ### Registering single lab component Here is an example of registering a single Vuetify lab component using either the singular name or array notation: ::: code-group ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { labComponents: 'VDataTable' // or ['VDataTable'] } } }) ``` ::: ### Registering multiple lab components Example registering multiple Vuetify lab components, use array notation: ::: code-group ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { labComponents: ['VDataTable', 'VDatePicker'] } } }) ``` ::: --- --- url: /guide/features/globals/composables.md --- # Vuetify Composables Manual imports of Vuetify composables are no longer required; auto-import is enabled by default for: * [useDate](https://vuetifyjs.com/en/api/use-date/) * [useDefaults](https://vuetifyjs.com/en/api/use-defaults/) * [useDisplay](https://vuetifyjs.com/en/api/use-display/) * [useLayout](https://vuetifyjs.com/en/api/use-layout/) * [useLocale](https://vuetifyjs.com/en/api/use-locale/) * [useRtl](https://vuetifyjs.com/en/api/use-rtl/) * [useTheme](https://vuetifyjs.com/en/api/use-theme/) * [useGoTo](https://vuetifyjs.com/en/api/use-go-to/): from Vuetify `v3.5.0+` (Polaris) and Vuetify Nuxt Module `v0.13.2+` * [useHotkey](https://vuetifyjs.com/en/api/use-hotkey/): from Vuetify `v3.8.0+` and Vuetify Nuxt Module `v0.19.0+` * [useRules](https://vuetifyjs.com/en/features/rules/): from Vuetify `v3.8.0+` and Vuetify Nuxt Module `v0.19.0+` * [useMask](https://vuetifyjs.com/en/api/use-mask/): from Vuetify `v3.10.0+` and Vuetify Nuxt Module `v0.19.0+` You can disable auto-import by setting `moduleOptions.importComposables: false`. 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+` ### 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`: ::: code-group ```ts [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 } } } }) ``` ::: --- --- url: /guide/features/icons.md --- # Icons This module will work with Pure CSS Icons, Font icons and SVG icons: * Pure CSS Icons via [UnoCSS Preset Icons](/guide/features/icons/unocss-preset-icons) * [Font icons](/guide/features/icons/font-icons) * [SVG icons](/guide/features/icons/svg-icons) We recommend using Pure CSS Icons, you will use/bundle only the SVG icons used in your application inside your CSS. ## Multiple Icon Sets You can register multiple icons sets adding them to the sets array, don't forget to add the default set, otherwise 'mdi' will be used: ::: code-group ```ts [nuxt.config.ts] import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { icons: { defaultSet: 'mdi', sets: ['mdi', 'fa'] } } } }) ``` ::: --- --- url: /guide/features/icons/unocss-preset-icons.md --- # UnoCSS Preset Icons You can use Pure CSS Icons via [UnoCSS Preset Icons](https://unocss.dev/presets/icons). To get started, install the [UnoCSS Nuxt Module](https://unocss.dev/integrations/nuxt) and enable [UnoCSS Preset Icons](https://unocss.dev/presets/icons). Once the UnoCSS Nuxt Module and UnoCSS Preset Icons are installed and configured, you need to install the icon collections you wish to use. UnoCSS Preset Icons use [Iconify](https://iconify.design/) as their icon data source. You need to install the corresponding icon set in `devDependencies` following the `@iconify-json/*` pattern. For example, `@iconify-json/mdi` for [Material Design Icons](https://materialdesignicons.com/), `@iconify-json/tabler` for [Tabler](https://tabler-icons.io/). You can refer to [Icônes](https://icones.js.org/) or [Iconify](https://icon-sets.iconify.design/) for all available collections. ## Vuetify 4 built-in UnoCSS icon sets Vuetify 4 provides pre-configured icon sets that work with UnoCSS Preset Icons. You can find the full list of available icon sets in the [Vuetify documentation](https://vuetifyjs.com/en/features/icon-fonts/#unocss-icon-sets). To use these built-in icon sets, you need to set the `defaultSet` to `custom` in your Nuxt configuration file and register the icon set in a custom Nuxt plugin. ::: warning Don’t change the default prefix `i-` of UnoCSS preset-icons, Vuetify icon sets rely on it. ::: For example, to use the Phosphor (`ph`) icon set: 1. Install the required dependencies: ::: code-group ```bash [npm] npm i -D @iconify-json/ph @unocss/nuxt ``` ```bash [yarn] yarn add -D @iconify-json/ph @unocss/nuxt ``` ```bash [pnpm] pnpm add -D @iconify-json/ph @unocss/nuxt ``` ```bash [bun] bun add -D @iconify-json/ph @unocss/nuxt ``` ::: 2. Configure the default set in your Nuxt configuration file: ::: code-group ```ts [nuxt.config.ts] import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ modules: ['@unocss/nuxt', 'vuetify-nuxt-module'], vuetify: { vuetifyOptions: { icons: { defaultSet: 'custom' } } } }) ``` ::: 3. Create a new Nuxt plugin to register the icon set: ::: code-group ```ts [plugins/vuetify-icons.ts] import { ph, aliases } from 'vuetify/iconsets/ph' import { defineNuxtPlugin } from '#imports' export default defineNuxtPlugin((nuxtApp) => { nuxtApp.hook('vuetify:configuration', ({ vuetifyOptions }) => { vuetifyOptions.icons = { defaultSet: 'ph', aliases, sets: { ph }, } }) }) ``` ::: ## Using UnoCSS Preset Icons UnoCSS Preset Icons allows you to use any icon via `v-icon`. You need to register the `mdi` icon set to allow Vuetify to configure the icon via the `class` attribute: ```vue ``` or in any Vuetify component that allows icon configuration: ```vue ``` You can also use any icon directly in your HTML markup: ```html
``` ## `unocss-mdi` icon set This module provides a new icon set for Vuetify called `unocss-mdi`. The `unocss-mdi` icon set uses the [@iconify-json/mdi](https://icon-sets.iconify.design/mdi/) collection. In order to use the `unocss-mdi` icon set, you will need to: * Install the `@iconify-json/mdi` package as a dev dependency. * Install the `@unocss/nuxt` package as a dev dependency and enable UnoCSS Preset Icons: [UnoCSS Nuxt Integration](https://unocss.dev/integrations/nuxt). To configure UnoCSS, add a `unocss.config.ts` file to your project root folder and register the icons preset: ::: code-group ```ts [unocss.config.ts] import { defineConfig, presetIcons } from 'unocss' export default defineConfig({ presets: [ presetIcons({ scale: 1.2, // scale the icons }), ] }) ``` ::: In your Nuxt configuration file, add the UnoCSS Nuxt module and configure the `unocss-mdi` icon set: ::: code-group ```ts [nuxt.config.ts] import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ modules: ['@unocss/nuxt', 'vuetify-nuxt-module'], vuetify: { vuetifyOptions: { icons: { defaultSet: 'unocss-mdi' } } } }) ``` ::: If you are not using the default UnoCSS Preset Icons [prefix](https://unocss.dev/presets/icons#prefix), you can configure it using the `icons.unocssIconPrefix` option in your Nuxt configuration file: ::: code-group ```ts [nuxt.config.ts] import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ modules: ['@unocss/nuxt', 'vuetify-nuxt-module'], vuetify: { vuetifyOptions: { icons: { defaultSet: 'unocss-mdi', unocssIconPrefix: 'myprefix-' } } } }) ``` ::: If you want to change the default icons in the `unocss-mdi` icon set, you can override any icon using the `icons.unocssIcons` option in your Vuetify options. This way, you don't need to write a custom plugin. Remember to add the prefix and the collection name to the icon name: ::: code-group ```ts [nuxt.config.ts] import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ modules: ['@unocss/nuxt', 'vuetify-nuxt-module'], vuetify: { vuetifyOptions: { icons: { defaultSet: 'unocss-mdi', unocssIcons: { // default is i-mdi:close-circle delete: 'i-mdi:close-circle-outline', // even from another collection, default is i-mdi:chevron-up collapse: 'i-tabler:chevron-up' } } } } }) ``` ::: You can also add additional icons using the `icons.unocssAdditionalIcons` option in your Vuetify options, don't forget to add the prefix and the collection name to the icon name. Additional icons will override the default icons, you should try to avoid overriding them using this option. ## Adding a new Vuetify icon set This module provides the `mdi` icons via `unocss-mdi` icon set. `unocss-mdi` icon set will use the [@iconify-json/mdi](https://icon-sets.iconify.design/mdi/) collection, but you can use another icon set by installing the corresponding `@iconify-json/*` packages and configuring Vuetify to use it: * configure the default set to use `custom`: `vuetify.vuetifyOptions.icons.defaultSet = 'custom'` in your nuxt config file * create a new Nuxt Plugin to configure the new icon set * add `@unocss-include` comment to the plugin file: this comment will be used by UnoCSS to include the icons * register `vuetify-configuration` hook in your plugin * register the new icon set aliases in the `vuetify-configuration` hook This is a Nuxt Plugin example using [@iconify-json/mdi](https://icon-sets.iconify.design/mdi/) collection (manual `unocss-mdi` icon set replacement), replace the icons using your new collection: ```ts // @unocss-include DON'T FORGET TO ADD THIS COMMENT import { mdi } from 'vuetify/iconsets/mdi' import { defineNuxtPlugin } from '#imports' export default defineNuxtPlugin((nuxtApp) => { nuxtApp.hook('vuetify:configuration', ({ vuetifyOptions }) => { vuetifyOptions.icons = { defaultSet: 'mdi', sets: { mdi }, aliases: { collapse: 'i-mdi:chevron-up', complete: 'i-mdi:check', cancel: 'i-mdi:close-circle', close: 'i-mdi:close', delete: 'i-mdi:close-circle', // delete (e.g. v-chip close) clear: 'i-mdi:close-circle', success: 'i-mdi:check-circle', info: 'i-mdi:information', warning: 'i-mdi:alert-circle', error: 'i-mdi:close-circle', prev: 'i-mdi:chevron-left', next: 'i-mdi:chevron-right', checkboxOn: 'i-mdi:checkbox-marked', checkboxOff: 'i-mdi:checkbox-blank-outline', checkboxIndeterminate: 'i-mdi:minus-box', delimiter: 'i-mdi:circle', // for carousel sortAsc: 'i-mdi:arrow-up', sortDesc: 'i-mdi:arrow-down', expand: 'i-mdi:chevron-down', menu: 'i-mdi:menu', subgroup: 'i-mdi:menu-down', dropdown: 'i-mdi:menu-down', radioOn: 'i-mdi:radiobox-marked', radioOff: 'i-mdi:radiobox-blank', edit: 'i-mdi:pencil', ratingEmpty: 'i-mdi:star-outline', ratingFull: 'i-mdi:star', ratingHalf: 'i-mdi:star-half-full', loading: 'i-mdi:cached', first: 'i-mdi:page-first', last: 'i-mdi:page-last', unfold: 'i-mdi:unfold-more-horizontal', file: 'i-mdi:paperclip', plus: 'i-mdi:plus', minus: 'i-mdi:minus', calendar: 'i-mdi:calendar' } } }) }) ``` --- --- url: /guide/features/icons/font-icons.md --- # Font Icons This module supports the following font icons libraries: * [Material Design Icons](https://materialdesignicons.com/) * [Material Icons](https://fonts.google.com/icons) * [Font Awesome 4](https://fontawesome.com/v4.7.0/) * [Font Awesome 5](https://fontawesome.com/) By default, the module uses the `mdi` font icon library. You can change this by setting the `defaultSet` option to: * `mdi` for [Material Design Icons](https://materialdesignicons.com/) * `md` for [Material Icons](https://fonts.google.com/icons) * `fa4` for [Font Awesome 4](https://fontawesome.com/v4.7.0/) * `fa` for [Font Awesome 5](https://fontawesome.com) To configure a font icon, specify the default set: ::: code-group ```ts [nuxt.config.ts] import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { icons: { defaultSet: 'mdi' } } } }) ``` ::: The module uses the CDN version of the font icon by default. If you prefer to use the local version, install the corresponding dependency; the module will automatically detect it and switch to registering the font using the local version. You can use the `cdn` option to change the CDN used for each font icon library: * [CDN for Material Design Icons (mdi)](https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css) * [CDN for Material Icons (md)](https://fonts.googleapis.com/css?family=Material+Icons) * [CDN for Font Awesome 4 (fa4)](https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css) * [CDN for Font Awesome 5 (fa)](https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css) To change the CDN for a font icon library, specify the `cdn` option: ::: code-group ```ts [nuxt.config.ts] import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { icons: { defaultSet: 'mdi', sets: [{ name: 'mdi', cdn: 'https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css' }] } } } }) ``` ::: --- --- url: /guide/features/icons/svg-icons.md --- # SVG Icons This module supports the following SVG icon libraries: * [@mdi/js](https://www.npmjs.com/package/@mdi/js) * [@fortawesome/fontawesome-svg-core](https://www.npmjs.com/package/@fortawesome/fontawesome-svg-core) You can also use the following packages SVG icons libraries: * [Nuxt Icon](https://github.com/nuxt-modules/icon) * [unplugin-icons](https://github.com/antfu/unplugin-icons) ## Material Design Icons Add the `@mdi/js` dependency to your project and configure the default set: ::: code-group ```ts [nuxt.config.ts] import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { icons: { defaultSet: 'mdi-svg' } } } }) ``` ::: You can also add icon aliases: ::: code-group ```ts [nuxt.config.ts] import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { icons: { defaultSet: 'mdi-svg', svg: { mdi: { aliases: { account: 'mdiAccount' } } } } } } }) ``` ::: ## Font Awesome Add the `@fortawesome/fontawesome-svg-core`, `@fortawesome/vue-fontawesome`, and `@fortawesome/free-solid-svg-icons` dependencies to your project and configure the default set: ::: code-group ```ts [nuxt.config.ts] import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { icons: { defaultSet: 'fa-svg' } } } }) ``` ::: You can also add more libraries and install them in your project; the module will register them automatically (this is the default behavior with the above configuration): ::: code-group ```ts [nuxt.config.ts] import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { icons: { defaultSet: 'fa-svg', svg: { fa: { libraries: [ [/* default export? */false, /* export name */ 'fas', /* library */ '@fortawesome/free-solid-svg-icons'] ] } } } } } }) ``` ::: ### Font Awesome PRO To register Font Awesome Icons PRO you need to add `@fortawesome/pro-solid-svg-icons` dependency to your project, configure the default set and add the library to the list of libraries: ::: code-group ```ts [nuxt.config.ts] import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { vuetifyOptions: { icons: { defaultSet: 'fa-svg', svg: { fa: { libraries: [ [/* default export? */false, /* export name */ 'fad', /* library */ '@fortawesome/pro-duotone-svg-icons'] ] } } } } } }) ``` ::: then you can use the icons in your components: ```vue fa-duotone fa-server ``` If you want to animate the icon, add the animation to the `v-icon` class: ```vue fa-duotone fa-server ``` --- --- url: /guide/features/icons/integrations.md --- # Integrations Vuetify supports custom icon sets using Vue icon libraries. This section explains how to integrate the following icon libraries with `vuetify-nuxt-module`: * [unplugin-icons/nuxt](https://github.com/unplugin/unplugin-icons) * [Iconify for Vue](https://iconify.design/docs/icon-components/vue/): if you are using SSR, please check [this comment](https://github.com/vuetifyjs/vuetify/issues/7821#issuecomment-1876623426) from the Iconify author (cyberalien) * [Iconify Icon web component](https://iconify.design/docs/iconify-icon/) * [Nuxt Icon](https://github.com/nuxt-modules/icon) * [Vue Phosphor Icons](https://github.com/phosphor-icons/vue) Please refer to the Vuetify documentation for more information about [custom icon sets](https://vuetifyjs.com/en/features/icon-fonts/#creating-a-custom-icon-set). All examples on this page use a custom icon set implementation. Once the custom icon set is implemented, you will need to configure `vuetify-nuxt-module` to use it: * add `icons.defaultSet = 'custom'` in your `vuetify.config.ts` file or in the `vuetifyOptions` object in your `nuxt.config.ts` file * register the custom icon set in the Vuetify options via a new Nuxt plugin using the `vuetify:before-create` hook * register the custom icon component in the Vue application via previous Nuxt plugin using `vuetify:ready` hook: this step is optional, only required if you want to use the custom icon component in your application If you wish to use another icon set library, you should adjust the corresponding icon set implementation in the examples below, which currently show `unplugin-icons`, Iconify Vue, and Nuxt Icon using Material Design Icons from Iconify. You can also use multiple icon sets; please check [multiple-icon-sets](/guide/features/icons/#multiple-icon-sets) and the [Vuetify documentation](https://vuetifyjs.com/en/features/icon-fonts/#multiple-icon-sets). ## unplugin-icons/nuxt You can check this [repository using material design icons](https://github.com/userquin/vuetify-nuxt-unplugin-icons-integration), which uses the `unplugin-icons/nuxt` Nuxt module: * default icon set in [nuxt.config.ts](https://github.com/userquin/vuetify-nuxt-unplugin-icons-integration/blob/main/nuxt.config.ts) configuration file * custom icon set in [unplugin-icons/index.ts](https://github.com/userquin/vuetify-nuxt-unplugin-icons-integration/blob/main/unplugin-icons/index.ts) icon set * custom icon set registration in [plugins/custom-icons.ts](https://github.com/userquin/vuetify-nuxt-unplugin-icons-integration/blob/main/plugins/custom-icons.ts) plugin You can run this repo in StackBlitz; please check the [README file](https://github.com/userquin/vuetify-nuxt-unplugin-icons-integration). ::: warning Please note that not all icons have been included. You will need to review the [unplugin-icons/index.ts](https://github.com/userquin/vuetify-nuxt-unplugin-icons-integration/blob/main/unplugin-icons/index.ts) file and include the icons you wish to use. ::: ## Iconify for Vue You can check this [repository using material design icons](https://github.com/userquin/vuetify-nuxt-iconify-vue-integration): * default icon set in [vuetify.config.ts](https://github.com/userquin/vuetify-nuxt-iconify-vue-integration/blob/main/vuetify.config.ts) configuration file * custom icon set in [iconify/index.ts](https://github.com/userquin/vuetify-nuxt-iconify-vue-integration/blob/main/iconify/index.ts) icon set * custom icon set registration in [plugins/custom-icons.ts](https://github.com/userquin/vuetify-nuxt-iconify-vue-integration/blob/main/plugins/custom-icons.ts) plugin * custom icon component registration in [plugins/custom-icons.ts](https://github.com/userquin/vuetify-nuxt-iconify-vue-integration/blob/main/plugins/custom-icons.ts) plugin You can run this repo in Stackblitz, check the [README file](https://github.com/userquin/vuetify-nuxt-iconify-vue-integration). ::: warning Not all icons have been included, you will need to review the [iconify/index.ts](https://github.com/userquin/vuetify-nuxt-iconify-vue-integration/blob/main/iconify/index.ts) file including the icons you want to use. Iconify for Vue is client side only, the icons will be rendered only on the client (you will see the icons loaded once the component requests them to the [Iconify API](https://iconify.design/docs/api/)). If you're using SSR in your Nuxt application, you maybe have hydration mismatch warnings. ::: ## Iconify Icon Web Component You can check this [repository using material design icons](https://github.com/userquin/vuetify-nuxt-iconify-icon-integration/): * default icon set in [vuetify.config.ts](https://github.com/userquin/vuetify-nuxt-iconify-icon-integration/blob/main/vuetify.config.ts) configuration file * custom Vue web component registration in [nuxt.config.ts](https://github.com/userquin/vuetify-nuxt-iconify-icon-integration/blob/main/nuxt.config.ts) configuration file, check vue option * custom icon set in [iconify/index.ts](https://github.com/userquin/vuetify-nuxt-iconify-icon-integration/blob/main/iconify/index.ts) icon set * custom icon set registration in [plugins/custom-icons.ts](https://github.com/userquin/vuetify-nuxt-iconify-icon-integration/blob/main/plugins/custom-icons.ts) plugin * custom icon component registration in [plugins/custom-icons.ts](https://github.com/userquin/vuetify-nuxt-iconify-icon-integration/blob/main/iconify/index.ts) plugin (`import 'iconify-icon'`) You can run this repo in Stackblitz, check the [README file](https://github.com/userquin/vuetify-nuxt-iconify-icon-integration). ::: warning Not all icons have been included, you will need to review the [iconify/index.ts](https://github.com/userquin/vuetify-nuxt-iconify-icon-integration/blob/main/iconify/index.ts) file including the icons you want to use. Iconify Icon Web Component is client side only, the icons will be rendered in the ShadowDOM (you will see the icons loaded once the component requests them to the [Iconify API](https://iconify.design/docs/api/)). ::: ## Nuxt Icon You can check this [repository using material design icons](https://github.com/userquin/vuetify-nuxt-icon-integration): * default icon set in [nuxt.config.ts](https://github.com/userquin/vuetify-nuxt-icon-integration/blob/main/nuxt.config.ts) configuration file * custom icon set in [nuxt-icon-set/common.ts](https://github.com/userquin/vuetify-nuxt-icon-integration/blob/main/nuxt-icon-set/common.ts) icon set * custom icon set registration in [plugins/custom-icons.ts](https://github.com/userquin/vuetify-nuxt-icon-integration/blob/main/plugins/custom-icons.ts) plugin * you can choose between `Icon` or `IconCSS`, check previous plugin file You can run this repo in Stackblitz, check the [README file](https://github.com/userquin/vuetify-nuxt-icon-integration). ## Vue Phosphor Icons You can check this [repository](https://github.com/userquin/vuetify-nuxt-phosphor-vue-integration): * default icon set in [vuetify.config.ts](https://github.com/userquin/vuetify-nuxt-phosphor-vue-integration/blob/main/vuetify.config.ts) configuration file * custom icon set in [phosphor/index.ts](https://github.com/userquin/vuetify-nuxt-phosphor-vue-integration/blob/main/phosphor/index.ts) icon set * custom icon set registration in [plugins/custom-icons.ts](https://github.com/userquin/vuetify-nuxt-phosphor-vue-integration/blob/main/plugins/custom-icons.ts) plugin * custom icon component registration in [plugins/custom-icons.ts](https://github.com/userquin/vuetify-nuxt-phosphor-vue-integration/blob/main/plugins/custom-icons.ts) plugin You can run this repo in Stackblitz, check the [README file](https://github.com/userquin/vuetify-nuxt-phosphor-vue-integration). ::: warning Not all icons have been included, you will need to review the [phosphor/index.ts](https://github.com/userquin/vuetify-nuxt-phosphor-vue-integration/blob/main/phosphor/index.ts) file including the icons you want to use. ::: --- --- url: /guide/features/i18n.md --- # Internationalization Once you install and configure the [@nuxtjs/i18n](https://i18n.nuxtjs.org/) Nuxt module, you can start using Vuetify's [internationalization](https://vuetifyjs.com/en/features/internationalization/) features. ::: tip Please note that you need to provide the translations yourself, as the module does not include them automatically. You can include translations from `vuetify/locale` or add your own. See the [Using Vuetify translations](#using-vuetify-translations) example for more details. ::: ## Examples The `@nuxtjs/i18n` module requires separate configuration files for Nuxt (`@nuxtjs/i18n`) and Vue (`vue-i18n`). You can refer to the following examples for the corresponding Nuxt configuration. If you would like to run a playground locally, please refer to the [contributing guide](https://github.com/vuetifyjs/nuxt-module/blob/main/CONTRIBUTING.md) and clone the GitHub repository to your local machine (Node 18+ is required to build the Nuxt module). ::: warning Before proceeding with the instructions below, it is recommended to read the [Contribution Guide](https://github.com/vuetifyjs/nuxt-module/blob/main/CONTRIBUTING.md). ::: ### Using Vuetify translations For better performance, it is recommended to enable [lazy loading](https://i18n.nuxtjs.org/docs/guide/lazy-load-translations); please see the [Lazy loading configuration](#lazy-loading-configuration) example. #### Nuxt configuration Add the `@nuxtjs/i18n` and `vuetify-nuxt-module` modules and configure them using the `i18n` and `vuetify` options, respectively. The following example is using json files for the internationalization messages: ::: code-group ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['@nuxtjs/i18n', 'vuetify-nuxt-module'], i18n: { // if not using RTL, you can replace locales with codes only // locales: ['en', 'es'], locales: [{ code: 'en', name: 'English', }, { code: 'es', name: 'Español', }, { code: 'ar', name: 'العربية', dir: 'rtl', }], defaultLocale: 'en', strategy: 'no_prefix', // or 'prefix_except_default' vueI18n: './i18n.config.ts', }, vuetify: { moduleOptions: { /* module specific options */ }, vuetifyOptions: { /* vuetify options */ } } }) ``` ::: #### Vue configuration Add the `vue-i18n` configuration file. You can place it in the root folder (remembering to update the `i18n.vueI18n` option), as shown in the previous Nuxt configuration: ::: code-group ```ts [i18n.config.ts] import en from './locales/en' import es from './locales/es' import ar from './locales/ar' export default defineI18nConfig(() => { return { legacy: false, locale: 'en', messages: { en, es, ar, }, } }) ``` ::: #### i18n folders Vuetify messages should be added under the `$vuetify` key, with your application messages at the root. You can access Vuetify messages using the `$vuetify.` prefix. For example, to add the Vuetify messages along with the application messages included in the corresponding JSON (you can inline the application messages here): ::: code-group ```ts [i18n/locales/en/index.ts] import { en as $vuetify } from 'vuetify/locale' import welcome from './welcome.json' const messages = { ...welcome, someKey: 'Some message', $vuetify, } export default messages ``` ::: ### Lazy loading configuration This example shows how to use the [lazy loading](https://i18n.nuxtjs.org/docs/guide/lazy-load-translations) option, using only json files, you can use also JavaScript or TypeScript files, loading also Vuetify translations. #### Nuxt configuration You will need to add the `@nuxtjs/i18n` and `vuetify-nuxt-module` modules, and then configure them using `i18n` and `vuetify` options respectively. The following example using json files for the internationalization messages using JSON files (you can also use Javascript or TypeScript files, check [i18n files](#i18n-folders): ::: code-group ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['@nuxtjs/i18n', 'vuetify-nuxt-module'], i18n: { locales: [{ code: 'en-US', iso: 'en-US', file: 'en-US.json', // <== or js/ts files name: 'English', dir: 'ltr', }, { code: 'es-ES', iso: 'es-ES', file: 'es-ES.json', // <== or js/ts files name: 'Español', dir: 'ltr', }], lazy: true, strategy: 'no_prefix', detectBrowserLanguage: false, // put your json files in this folder or configure your own path langDir: 'locales/', defaultLocale: 'en-US', types: 'composition', pages: undefined, dynamicRouteParams: false, skipSettingLocaleOnNavigate: true, // debug: true, // Vue configuration file, you can move it to the root folder vueI18n: './config/i18n.config.ts' }, vuetify: { moduleOptions: { /* module specific options */ }, vuetifyOptions: { /* vuetify options */ } } }) ``` ::: #### Vue configuration Add the `vue-i18n` configuration file, you can move it to the root folder (remember to update `i18n.vueI18n` option), following with the previous Nuxt configuration: ::: code-group ```ts [config/i18n.config.ts] export default { legacy: false, availableLocales: ['en-US', 'es-ES'], fallbackLocale: 'en-US', fallbackWarn: true } ``` ::: --- --- url: /guide/features/date.md --- # Date Support To use Vuetify components [that require date functionality](https://vuetifyjs.com/en/features/dates/), you can install and configure one of the [@date-io](https://github.com/dmtrKovalenko/date-io#projects) adapters. Here are the steps to set up date functionality: * Install one of the [@date-io](https://github.com/dmtrKovalenko/date-io#projects) adapters (optional). * Configure the date entry in your Vuetify configuration: ```ts vuetifyOptions: { date: { adapter: 'vuetify' // 'vuetify' | 'date-fns' | 'moment' | 'luxon' | 'dayjs' | 'js-joda' | 'date-fns-jalali' | 'jalaali' | 'hijri' | 'custom' } } ``` If the `@nuxtjs/i18n` module is installed, the `vuetifyOptions.date.locale` and `vuetifyOptions.date.rtl` options will be automatically configured. Please note that any manually configured `locale` entry will be ignored in this case. If you prefer to use a custom date adapter, you can set `vuetifyOptions.date.adapter = 'custom'` and then follow these steps: * Add a Nuxt Plugin and use the `vuetify:configuration` hook to configure your Vuetify options. * Import the `virtual:vuetify-date-configuration` module to access the configuration: ```ts import { adapter, dateConfiguration, i18n } from 'virtual:vuetify-date-configuration' ``` Check out [vuetify-date](https://github.com/vuetifyjs/nuxt-module/blob/main/src/runtime/plugins/vuetify-date.ts) plugin and the [date module](https://github.com/vuetifyjs/nuxt-module/blob/main/src/runtime/plugins/date.ts) for an example of a custom date adapter and how to access to the configuration. ## Troubleshooting ### `useDate()` — call methods on the instance, don't destructure them `useDate()` returns a Vuetify date adapter instance whose methods rely on `this`. Destructuring them detaches `this`, which throws during SSR (e.g. `Cannot read properties of undefined (reading 'locale')`). In dev the error is swallowed and the page falls back to client rendering, so it only surfaces after `nuxt build`/`nuxt generate`. ```ts // ❌ loses `this` — crashes on the server const { date, format } = useDate() format(date(value), 'keyboardDate') // ✅ keep the instance, call methods on it const adapter = useDate() adapter.format(adapter.date(value), 'keyboardDate') ``` ### date-fns base locale With the `date-fns` adapter the locale is resolved from `vuetifyOptions.locale.locale` (mapped to the matching `date-fns/locale` export) at build time. If it is unset or unknown the module falls back to `enUS` and logs a warning. Set `vuetifyOptions.locale.locale` to a supported Vuetify locale to choose the base locale. ### Function-valued date formats are not supported `vuetifyOptions.date.formats` only accepts serializable `Intl.DateTimeFormatOptions`. The date configuration is statically serialized, so function formats cannot be expressed. Use a `custom` date adapter if you need them. --- --- url: /guide/features/ssr.md --- # Server Side Rendering (SSR) Vuetify Nuxt Module supports [SSR](https://nuxt.com/docs/api/configuration/nuxt-config#ssr) out of the box. It will automatically detect if you are using SSR and configure Vuetify accordingly. The module supports the following [HTTP Client hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints). Please check [SSR HTTP Client hints](#ssr-http-client-hints) for more details: * [Sec-CH-Prefers-Color-Scheme](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme) * [Sec-CH-Prefers-Reduced-Motion](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion) * [Sec-CH-Viewport-Width](https://wicg.github.io/responsive-image-client-hints/#sec-ch-viewport-width) * [Sec-CH-Viewport-Height](https://wicg.github.io/responsive-image-client-hints/#sec-ch-viewport-height) * [Sec-CH-DPR](https://wicg.github.io/responsive-image-client-hints/#sec-ch-dpr) ::: warning The [HTTP Client hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints) headers listed above are still in draft, and only Chromium based browsers support them: Chrome, Edge, Chromium and Opera. ::: ## Vuetify SASS Variables If you are customizing Vuetify SASS Variables via the [configFile](https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#customising-variables) module option with SSR enabled, you may need to disable `features.inlineStyles` (or `experimental.inlineSSRStyles` for Nuxt versions prior to `3.9.0`) in your Nuxt config file: ::: code-group ```ts [nuxt.config.ts] export default defineNuxtConfig({ ssr: true, modules: ['vuetify-nuxt-module'], vuetify: { moduleOptions: { /* other module options */ styles: { configFile: 'assets/settings.scss' } }, vuetifyOptions: { /* vuetify options */ } }, /* For Nuxt 3.9.0+ */ features: { inlineStyles: false }, /* For Nuxt prior to 3.9.0 experimental: { inlineSSRStyles: false } */ }) ``` ::: For a more detailed example, see [Overriding SASS Variables](/guide/styling/sass#overriding-sass-variables). ## Vuetify Themes If you use multiple Vuetify Themes with SSR enabled, please note that Vuetify's [useTheme](https://vuetifyjs.com/en/api/use-theme/) will not work as expected, since the server cannot determine which theme to use (it will default to the standard theme). This module supports restoring the theme using `prefers-color-scheme`. Please check [Sec-CH-Prefers-Color-Scheme](#sec-ch-prefers-color-scheme) for more details. Alternatively, you can add client-side logic to restore the theme after hydration. For example, if you wish to use `dark` and `light` Vuetify Themes and restore the initial value using `prefers-color-scheme` and `localStorage`, you can use the [useDark](https://vueuse.org/core/useDark/) and [useToggle](https://vueuse.org/shared/useToggle/) composables from VueUse as follows: ::: code-group ```ts [composables/useCustomTheme.ts] export function useCustomTheme() { const { $vuetify } = useNuxtApp() const isDark = useDark({ valueDark: 'dark', valueLight: 'light', initialValue: 'light', onChanged: (dark: boolean) => { $vuetify.theme.global.name.value = dark ? 'dark' : 'light' }, }) const toggle = useToggle(isDark) return { isDark, toggle } } ``` ::: then, in your `App.vue` or layout templates, you can use the composable to restore the theme: ```vue ``` ### Vuetify `system` theme and SSR ::: warning Vuetify 4 resolves `defaultTheme: 'system'` only in the browser (via `window.matchMedia`), so it is **not** SSR/SSG-safe: the server has no access to the OS color-scheme preference, so the first paint defaults to `light` and may flash on dark systems. To avoid the flash, set explicit `dark`/`light` themes and enable `ssrClientHints.prefersColorScheme` (optionally `prefersColorSchemeOptions.useBrowserThemeOnly`) so the browser preference is restored after the first request: ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['vuetify-nuxt-module'], vuetify: { moduleOptions: { ssrClientHints: { prefersColorScheme: true, prefersColorSchemeOptions: { useBrowserThemeOnly: true, }, }, }, vuetifyOptions: { theme: { defaultTheme: 'light', }, }, }, }) ``` Full server-side resolution of the `system` theme is tracked for a future major release. ::: ## Vuetify Display If you're using Vuetify [useDisplay](https://vuetifyjs.com/en/api/use-display/) composable with SSR enabled, there is only one way for the server to get the client's width and height (still in draft): use the [Sec-CH-Viewport-Width](https://wicg.github.io/responsive-image-client-hints/#sec-ch-viewport-width) and [Sec-CH-Viewport-Height](https://wicg.github.io/responsive-image-client-hints/#sec-ch-viewport-height) headers respectively, will not work for the initial request. Check [SSR HTTP Client hints](#ssr-http-client-hints) for more details. ## SSR HTTP Client hints You can enable SSR **HTTP Client hints** using the `ssrClientHints` module option: * `viewportSize`: enable `Sec-CH-Viewport-Width`, `Sec-CH-Viewport-Height` and `Sec-CH-DPR` headers (defaults to `false`)? * `prefersColorScheme`: enable `Sec-CH-Prefers-Color-Scheme` header (defaults to `false`)? Check [Sec-CH-Prefers-Color-Scheme](#sec-ch-prefers-color-scheme) for more details * `prefersReducedMotion`: `Sec-CH-Prefers-Reduced-Motion` header (defaults to `false`)? If you enable `prefersReducedMotion` option, you should handle it with a Nuxt plugin registering the `vuetify:ssr-client-hints` hook. **Your Nuxt plugin hook will be only called on the server** with the Vuetify options and the `ssrClientHints` as parameter. Before calling your `vuetify:ssr-client-hints` hook, this module will configure `vuetifyOptions.ssr` and the `global Vuetify theme` properly when `ssrClientHints.viewportSize` and `ssrClientHints.prefersColorScheme` are enabled. ```ts export default defineNuxtPlugin((nuxtApp) => { nuxtApp.hook('vuetify:ssr-client-hints', ({ vuetifyOptions, ssrClientHints, ssrClientHintsConfiguration }) => { // your logic here }) }) ``` where: * `vuetifyOptions` is the configuration for the Vuetify instance (if you need to update some option) * `ssrClientHints` are the client hints extracted from the request headers (the full definition can be found in the [types.ts](https://github.com/vuetifyjs/nuxt-module/blob/main/src/types.ts) in the `#app` module augmentation) * `ssrClientHintsConfiguration` is the client hints configuration (the full definition can be found in the `virtual:vuetify-ssr-client-hints-configuration` declaration in the [configuration.ts](https://github.com/vuetifyjs/nuxt-module/blob/main/configuration.d.ts) module) This module will expose the `$ssrClientHints` property in the Nuxt App instance (`useNuxtApp().$ssrClientHints`) for the headers received from the client (all the properties that are not enabled in the module option will be `undefined`), check the module augmentation for `#app` in the [types.ts](https://github.com/vuetifyjs/nuxt-module/blob/main/src/types.ts) module for the full definition. ### Reload on First Request Browsers that support any of the **HTTP Client hints** will send them only after the first request. This module provides support to reload the page when the browser hits the server for the first time. To enable this feature, you must configure `ssrClientHints.reloadOnFirstRequest` to `true` in the module options. ### Sec-CH-Prefers-Color-Scheme This module provides support to access to the `prefers-color-scheme` user's preference in the server side, it will not work on first request. To enable this feature, you must configure `ssrClientHints.prefersColorScheme` to `true` in the module options. To access the value in the server, you can use the `vuetify:ssr-client-hints` hook in your custom Nuxt plugin or using the `$ssrClientHints` property in the Nuxt App instance (`useNuxtApp().$ssrClientHints`). :::warning Since the headers sent by the user agent may not be accurate, from time to time your application will get some hydration mismatch warnings in the console. If you resize the window while your application is loading then you may get a mismatch hydration warning in the console. ::: #### Multiple Themes This module also provides support for **multiple themes** via custom HTTP cookie. To enable this feature, add the following module options: * `ssrClientHints.prefersColorScheme` to `true` * `ssrClientHints.prefersColorSchemeOptions`: can be an empty object where `ssrClientHints.prefersColorSchemeOptions` is an object with the following properties: * `baseUrl`: the cookie path (defaults to `/`) * `cookieName`: the cookie name to store the theme name (defaults to `color-scheme`) * `darkThemeName`: the theme name to be used when the user's preference is `dark` (defaults to `dark`) * `lightThemeName`: the theme name to be used when the user's preference is `light` (defaults to `light`) * `useBrowserThemeOnly`: this flag can be used when your application provides a custom dark and light themes, but will not provide a theme selector, i.e., the theme selector will be the one provided by the browser (defaults to `false`) You also need to configure the default Vuetify theme in the `vuetifyOptions` module option, should be `darkThemeName` or `lightThemeName`, otherwise you will get an error. `darkThemeName` and `lightThemeName` will be used by the module for the initial theme configuration, when the user changes the application theme (via `useNuxtApp().$vuetify.theme.global.name`), the module will update the cookie with the selected theme. The module will add the cookie with the following properties: * `Path` to `nuxt.options.app.baseURL` (defaults to `/`) * `Expires` to 365 days (will be updated on every page refresh) * `SameSite` to `Lax` --- --- url: /guide/advanced/layers-and-hooks.md --- # Nuxt Layers and Module Hooks You can load your Vuetify configuration using [Nuxt Layers](https://nuxt.com/docs/getting-started/layers#layers) or a custom module via the `vuetify:registerModule` [Nuxt Module Hook](https://nuxt.com/docs/guide/going-further/hooks#nuxt-hooks-build-time). ## Nuxt Layers Follow the [installation instructions](/guide/) for `vuetify-nuxt-module` in your layer. Then, you can extend that layer in your other project: ::: code-group ```ts [nuxt.config.ts] import { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ extends: ['my-awesome-vuetify-layer'], }) ``` ::: ## Nuxt Module Hook You can also use a custom module to load your Vuetify configuration: ::: code-group ```ts [nuxt.config.ts] import MyVuetifyModule from './modules/my-vuetify-module' export default defineNuxtConfig({ modules: [MyVuetifyModule, 'vuetify-nuxt-module'] }) ``` ::: and your module will load your configuration via the `vuetify:registerModule` Nuxt hook: ::: code-group ```ts [modules/my-vuetify-module.ts] export default defineNuxtModule({ setup(_options, nuxt) { nuxt.hook('vuetify:registerModule', register => register({ moduleOptions: { /* module specific options */ }, vuetifyOptions: { /* vuetify options */ }, })) }, }) ``` ::: --- --- url: /guide/advanced/runtime-hooks.md --- # Nuxt Runtime Hooks This module configures and registers Vuetify using Nuxt plugins via the `vuetify:configuration` runtime hook. The `vuetify:configuration` hook is intended for internal use and should not be used by third-party plugins or directly from your application. This module exposes only the necessary Nuxt plugins to configure Vuetify based on the options you've set in your application: * [icons](/guide/features/icons/): This Nuxt plugin is always registered. You can write your own Nuxt plugin via the `vuetifyOptions.icons.defaultSet = 'custom'` Nuxt configuration option. An example using UnoCSS can be found in [Adding a new Vuetify icon set](/guide/features/icons/unocss-preset-icons#adding-a-new-vuetify-icon-set), where you can replace the icons with your custom ones. * [i18n](/guide/features/i18n): This Nuxt plugin is registered only when the `@nuxtjs/i18n` module is configured. * [date](/guide/features/date): This Nuxt plugin is registered only when the `vuetifyOptions.date` Nuxt configuration option is configured. If you need to update the Vuetify configuration before `createVuetify` is called and the plugin is registered, you can use the `vuetify:before-create` hook in your Nuxt Plugin: ::: code-group ```ts [plugins/vuetify.ts] import { defineNuxtPlugin } from '#imports' export default defineNuxtPlugin((nuxtApp) => { nuxtApp.hook('vuetify:before-create', ({ vuetifyOptions }) => { // update vuetifyOptions }) }) ``` ::: ## Dynamic CSP nonce Vuetify can add a `nonce` attribute to the `