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:
bash
npm create vuetify@latest -- --platform=nuxtbash
yarn create vuetify --platform=nuxtbash
pnpm create vuetify --platform=nuxtbash
bun create vuetify --platform=nuxtYou can also try it online on StackBlitz:
Existing Project
If you already have a Nuxt project, you can add the module using nuxt:
bash
npx nuxt module add vuetify-nuxt-modulebash
yarn dlx nuxt module add vuetify-nuxt-modulebash
pnpm dlx nuxt module add vuetify-nuxt-modulebash
bun x nuxt module add vuetify-nuxt-moduleUsage
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:
ts
import { defineNuxtConfig } from 'nuxt/config'
export default defineNuxtConfig({
modules: [
'vuetify-nuxt-module'
],
})ts
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.
Vuetify Nuxt Module Options
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
}moduleOptions
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<string, string[]>
/**
* 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
}
}vuetifyOptions
ts
export interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'aliases' | 'components' | 'directives' | 'locale' | 'date' | 'icons'>> {
/**
* Configure the SSR options.
*
* This option is only used when SSR is enabled in your Nuxt configuration.
*/
ssr?: {
clientWidth: number
clientHeight?: number
}
aliases?: Record<string, ComponentName>
/**
* 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<LocaleOptions, 'adapter'> & 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, the module will throw an error if any Vuetify Vite Plugin is installed in your Nuxt configuration.