### Install Dependencies for Phosphor Icons

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/unocss-preset-icons.md

Install the necessary icon set and UnoCSS Nuxt module dependencies using npm, yarn, pnpm, or bun.

```bash
npm i -D @iconify-json/ph @unocss/nuxt
```

```bash
yarn add -D @iconify-json/ph @unocss/nuxt
```

```bash
pnpm add -D @iconify-json/ph @unocss/nuxt
```

```bash
bun add -D @iconify-json/ph @unocss/nuxt
```

--------------------------------

### Minimal Vuetify Nuxt Module Setup

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/index.md

Configure the Vuetify Nuxt Module with minimal setup in your nuxt.config.ts file. This configuration works for most use cases.

```typescript
import { defineNuxtConfig } from 'nuxt/config'

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

--------------------------------

### Configure Custom Vuetify Icon Set with Unocss

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/unocss-preset-icons.md

This Nuxt plugin example demonstrates how to replace the default MDI icon set with a custom one. Ensure the `@unocss-include` comment is present for UnoCSS to recognize and include the icons. This setup is useful when you need to use a specific icon collection not provided by default.

```typescript
// @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'
      }
    }
  })
})
```

--------------------------------

### Configure useRules Composable

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/globals/composables.md

Example of configuring the `useRules` composable in `nuxt.config.ts`. This allows enabling the composable and setting its specific configuration options.

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

--------------------------------

### Configure Font Awesome PRO with Duotone Icons

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/svg-icons.md

Register Font Awesome PRO duotone icons by adding the dependency and specifying the library in `nuxt.config.ts`. This example uses `@fortawesome/pro-duotone-svg-icons`.

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

--------------------------------

### Create New Vuetify Project with Nuxt

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/styling/other-frameworks.md

Use the Vuetify scaffolding tool to create a new Nuxt project. You can select UnoCSS or Tailwind CSS as an optional module during setup for automatic configuration.

```bash
pnpm create vuetify --platform nuxt
```

```bash
npm create vuetify --platform nuxt
```

```bash
yarn create vuetify --platform nuxt
```

--------------------------------

### Install Vuetify Nuxt Module

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/README.md

Use this command to add the vuetify-nuxt-module to your Nuxt.js project. This module requires Vite and will not work with Webpack.

```bash
npx nuxt module add vuetify-nuxt-module
```

--------------------------------

### Alias Global Component with Component Registration

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/globals/global-components.md

This example demonstrates how aliasing a global component is equivalent to registering the aliased component directly using the `components` option. Ensure the aliased component is also registered if you intend to use it globally.

```typescript
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      aliases: {
        MyButton: 'VBtn'
      },
      components: 'VBtn'
    }
  }
})
```

--------------------------------

### Configure Font Icon CDN Path

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/font-icons.md

Customize the CDN URL for a specific font icon library. This example sets a custom CDN for Material Design Icons.

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

--------------------------------

### Custom Vuetify Nuxt Module Setup

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/index.md

Configure the Vuetify Nuxt Module with custom options in your nuxt.config.ts file. Allows for specific module and Vuetify options.

```typescript
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: [
    'vuetify-nuxt-module'
  ],
  vuetify: {
    moduleOptions: {
      styles: {
        colors: false
      }
    },
    vuetifyOptions: {
      icons: 'unocss-mdi'
    }
  }
})
```

--------------------------------

### Nuxt Configuration for i18n and Vuetify

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/i18n.md

Configure the @nuxtjs/i18n and vuetify-nuxt-module modules in your Nuxt application. This example demonstrates setting up multiple locales, including a right-to-left language, and specifying the vue-i18n configuration file.

```typescript
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 */
    }
  }
})
```

--------------------------------

### Configure Vuetify Nuxt Module

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/README.md

Add the 'vuetify-nuxt-module' to your Nuxt configuration file. This snippet shows the basic setup for module integration and options.

```typescript
import {
  defineNuxtConfig
} from 'nuxt/config'

export default defineNuxtConfig({
  modules: [
    'vuetify-nuxt-module'
  ],
  vuetify: {
    moduleOptions: {
      /* module specific options */
    },
    vuetifyOptions: {
      /* vuetify options */
    }
  }
})
```

--------------------------------

### Set Default Font Icon Set

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/font-icons.md

Configure the default font icon library for Vuetify. This example sets Material Design Icons as the default.

```typescript
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: 'mdi'
      }
    }
  }
})
```

--------------------------------

### Extend Vuetify Layer in Nuxt Config

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/advanced/layers-and-hooks.md

Use the `extends` property in `nuxt.config.ts` to load a Vuetify configuration from a Nuxt Layer. Ensure the layer is installed according to the module's installation instructions.

```typescript
import { defineNuxtConfig } from 'nuxt/config'

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

--------------------------------

### Use Font Awesome Duotone Icon in Vue Component

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/svg-icons.md

Example of using a Font Awesome duotone icon ('fa-duotone fa-server') within a Vue component's template.

```vue
<v-icon>fa-duotone fa-server</v-icon>
```

--------------------------------

### Integrating Vuetify and Application Messages

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/i18n.md

Combine Vuetify's locale messages (prefixed with $vuetify) with your application-specific messages in a locale file. This example shows how to import Vuetify's English locale and merge it with custom messages.

```typescript
import { en as $vuetify } from 'vuetify/locale'
import welcome from './welcome.json'

const messages = {
  ...welcome,
  someKey: 'Some message',
  $vuetify,
}
export default messages
```

--------------------------------

### Create New Vuetify Nuxt App

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/index.md

Scaffold a new Nuxt application with Vuetify integration using pnpm.

```bash
pnpm create vuetify --platform=nuxt
```

--------------------------------

### Create New Vuetify Nuxt Project

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/index.md

Use the Vuetify creator to scaffold a new Nuxt project with Vuetify integration. Supports npm, yarn, pnpm, and bun.

```bash
npm create vuetify@latest -- --platform=nuxt
```

```bash
yarn create vuetify --platform=nuxt
```

```bash
pnpm create vuetify --platform=nuxt
```

```bash
bun create vuetify --platform=nuxt
```

--------------------------------

### Configure Font Awesome with Additional Libraries

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/svg-icons.md

Automatically register additional Font Awesome SVG icon libraries by listing them in `nuxt.config.ts`. The module handles the registration process.

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

--------------------------------

### Create a new branch

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/CONTRIBUTING.md

Use this command to create a new branch for your work. Ensure you are in the root folder of the vuetify-nuxt-module repository.

```shell
git checkout -b my-new-branch
```

--------------------------------

### Add Vuetify Nuxt Module to Existing Project

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/index.md

Add the Vuetify Nuxt Module to an existing Nuxt project using the nuxt CLI. Supports npm, yarn, pnpm, and bun.

```bash
npx nuxt module add vuetify-nuxt-module
```

```bash
yarn dlx nuxt module add vuetify-nuxt-module
```

```bash
pnpm dlx nuxt module add vuetify-nuxt-module
```

```bash
bun x nuxt module add vuetify-nuxt-module
```

--------------------------------

### Registering Vuetify SSR Client Hints Hook

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/ssr.md

Register a Nuxt plugin to handle the `vuetify:ssr-client-hints` hook. This hook is called on the server with Vuetify options and client hint configurations.

```typescript
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('vuetify:ssr-client-hints', ({ vuetifyOptions, ssrClientHints, ssrClientHintsConfiguration }) => {
    // your logic here
  })
})
```

--------------------------------

### Custom Theme Management with VueUse for SSR

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/ssr.md

Implement custom theme management for SSR using VueUse composables like useDark and useToggle. This allows restoring themes based on prefers-color-scheme and localStorage.

```typescript
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 }
}
```

--------------------------------

### Register All Vuetify Lab Components

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/globals/lab-components.md

Enable auto-import for all Vuetify lab components by setting `vuetifyOptions.labsComponents` to `true` in your `nuxt.config.ts`.

```typescript
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      labComponents: true
    }
  }
})
```

--------------------------------

### Configure Nuxt to Import Global Styles

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/styling/sass.md

Add your `globals.scss` file to the `css` array in your `nuxt.config.ts` to ensure these styles are imported into your Nuxt application. This makes global overrides available across all components.

```typescript
export default defineNuxtConfig({
  css: ['@/assets/css/globals.scss']
  // other options
})
```

--------------------------------

### Register Multiple Icon Sets

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/index.md

Configure multiple icon sets, such as 'mdi' and 'fa', in your `nuxt.config.ts`. Ensure the default set is specified.

```typescript
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: 'mdi',
        sets: ['mdi', 'fa']
      }
    }
  }
})
```

--------------------------------

### Define Vuetify Configuration with defineVuetifyConfiguration

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/configuration/vuetify-options.md

Use the `defineVuetifyConfiguration` helper function in your `vuetify.config.ts` file to define Vuetify options. This provides type safety and autocompletion.

```typescript
import { defineVuetifyConfiguration } from 'vuetify-nuxt-module/custom-configuration'

export default defineVuetifyConfiguration({
  /* vuetify options */
})
```

--------------------------------

### Import Date Configuration in Nuxt Plugin

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/date.md

When using a custom date adapter, import the necessary configuration utilities from the virtual module within a Nuxt plugin.

```typescript
import { adapter, dateConfiguration, i18n } from 'virtual:vuetify-date-configuration'
```

--------------------------------

### Access Vuetify Instance After Ready

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/advanced/runtime-hooks.md

Use the `vuetify:ready` hook in a Nuxt plugin to access the Vuetify instance after it has been created and is ready for use. This is useful for performing actions that require the Vuetify instance.

```ts
import { defineNuxtPlugin } from '#imports'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('vuetify:ready', (vuetify) => {
    // your logic here
  })
})
```

--------------------------------

### Configure Vuetify with unocss-mdi Icon Set

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/unocss-preset-icons.md

Set `unocss-mdi` as the default icon set in your `nuxt.config.ts` file. Ensure both `@unocss/nuxt` and `vuetify-nuxt-module` are listed as modules.

```typescript
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ['@unocss/nuxt', 'vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: 'unocss-mdi'
      }
    }
  }
})
```

--------------------------------

### Use UnoCSS Icon in HTML Markup

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/unocss-preset-icons.md

Directly apply an icon class 'i-mdi:home' to an HTML element.

```html
<div class="i-mdi:home"></div>
```

--------------------------------

### Configure UnoCSS Preset Icons

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/unocss-preset-icons.md

Register the `presetIcons` in your `unocss.config.ts` file. You can adjust the icon scale as needed.

```typescript
import { defineConfig, presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    presetIcons({
      scale: 1.2, // scale the icons
    }),
  ]
})
```

--------------------------------

### Vuetify Nuxt Module Options Interface

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/index.md

Defines the main interface for configuring the Vuetify Nuxt module. It allows for inline configuration or specifying a file path for Vuetify options.

```typescript
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
}
```

--------------------------------

### Nuxt Configuration for i18n and Vuetify

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/i18n.md

Configure Nuxt.js to use @nuxtjs/i18n and vuetify-nuxt-module. This snippet shows how to define locales using JSON files and set up i18n and Vuetify options.

```typescript
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 */
    }
  }
})
```

--------------------------------

### Register All Vuetify Directives

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/globals/directives.md

Use this configuration to register all available Vuetify directives. Ensure the 'vuetify-nuxt-module' is included in your Nuxt modules.

```typescript
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      directives: true
    }
  }
})
```

--------------------------------

### Register Multiple Vuetify Lab Components

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/globals/lab-components.md

Register multiple specific Vuetify lab components by providing an array of their names in `nuxt.config.ts`.

```typescript
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      labComponents: ['VDataTable', 'VDatePicker']
    }
  }
})
```

--------------------------------

### Configure Material Design Icons with Aliases

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/svg-icons.md

Define icon aliases for Material Design Icons within the `vuetifyOptions` in `nuxt.config.ts`. This allows for custom shorthand names for icons.

```ts
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: 'mdi-svg',
        svg: {
          mdi: {
            aliases: {
              account: 'mdiAccount'
            }
          }
        }
      }
    }
  }
})
```

--------------------------------

### Register Multiple Global Components

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/globals/global-components.md

Register multiple Vuetify components globally by providing an array of component names to the `components` option.

```typescript
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      components: ['VDialog', 'VSheet']
    }
  }
})
```

--------------------------------

### Vue i18n Configuration

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/i18n.md

Set up the vue-i18n configuration file, specifying legacy mode, default locale, and message imports. This file should be referenced in your Nuxt configuration.

```typescript
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,
    },
  }
})
```

--------------------------------

### Vue i18n Configuration

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/i18n.md

Configure Vue i18n settings, including legacy mode, available locales, and fallback locale. This file should be referenced in the Nuxt configuration.

```typescript
export default {
  legacy: false,
  availableLocales: ['en-US', 'es-ES'],
  fallbackLocale: 'en-US',
  fallbackWarn: true
}
```

--------------------------------

### Module Options Interface

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/index.md

Defines the interface for module-specific options, including composable prefixing, style configuration, and SASS compiler settings.

```typescript
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
  }
}
```

--------------------------------

### Register Vuetify Module via Nuxt Config

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/advanced/layers-and-hooks.md

Include your custom Vuetify module and the `vuetify-nuxt-module` in the `modules` array of your `nuxt.config.ts` to load Vuetify configuration.

```typescript
import MyVuetifyModule from './modules/my-vuetify-module'

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

--------------------------------

### SASS Customization with configFile

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/styling/common-setup.md

Customize SASS variables for Vuetify 3+ by providing a path to a SASS configuration file. This allows overriding global and component-level variables.

```typescript
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    moduleOptions: {
      styles: {
        configFile: 'assets/settings.scss'
      }
    }
  }
})
```

--------------------------------

### Enable Experimental Cache in Nuxt Config

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/styling/caching.md

Enable the experimental cache for Vuetify styles by setting `experimental.cache` to `true` within the `vuetify.moduleOptions.styles` configuration in your `nuxt.config.ts` file. This requires a custom SASS config file to be specified.

```typescript
export default defineNuxtConfig({
  vuetify: {
    moduleOptions: {
      styles: {
        configFile: 'assets/settings.scss',
        experimental: {
          cache: true
        }
      }
    }
  }
})
```

--------------------------------

### Register Vuetify Icon Set in Nuxt Plugin

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/unocss-preset-icons.md

Create a Nuxt plugin to register the 'ph' icon set and its aliases for use with Vuetify.

```typescript
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 },
    }
  })
})
```

--------------------------------

### Define Vuetify Configuration with Object Notation

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/configuration/vuetify-options.md

Alternatively, define Vuetify options using plain object notation in your `vuetify.config.ts` file. Ensure to use the `ExternalVuetifyOptions` type for type checking.

```typescript
import type { ExternalVuetifyOptions } from 'vuetify-nuxt-module'

export default {
  /* vuetify options */
} satisfies ExternalVuetifyOptions
```

--------------------------------

### Use UnoCSS Icon in Vuetify Component

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/unocss-preset-icons.md

Apply an icon to a Vuetify component using the 'i-mdi:home' class.

```vue
<v-icon class="i-mdi:home"></v-icon>
```

--------------------------------

### Configure Vuetify Date Adapter

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/date.md

Set the date adapter for Vuetify components. Supports built-in adapters like 'vuetify', 'date-fns', 'moment', and others, or a 'custom' option.

```typescript
vuetifyOptions: {
  date: {
    adapter: 'vuetify' // 'vuetify' | 'date-fns' | 'moment' | 'luxon' | 'dayjs' | 'js-joda' | 'date-fns-jalali' | 'jalaali' | 'hijri' | 'custom'
  }
}
```

--------------------------------

### Configure Vuetify Options Path in Nuxt Config

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/configuration/vuetify-options.md

Specify the path to your Vuetify configuration file within the `nuxt.config.ts` file. This option is optional as the module can automatically detect configuration files.

```typescript
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
  }
})
```

--------------------------------

### Configure Icon in Vuetify Component

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/unocss-preset-icons.md

Set an icon for a Vuetify component's state, like the true state of a checkbox, using the 'i-mdi:account' class.

```vue
<v-checkbox true-icon="i-mdi:account"></v-checkbox>
```

--------------------------------

### Configure Custom UnoCSS Icon Prefix

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/unocss-preset-icons.md

If you are not using the default UnoCSS icon prefix, specify your custom prefix using the `unocssIconPrefix` option in `nuxt.config.ts`.

```typescript
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ['@unocss/nuxt', 'vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: 'unocss-mdi',
        unocssIconPrefix: 'myprefix-'
      }
    }
  }
})
```

--------------------------------

### Register Single Global Component

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/globals/global-components.md

Register a single Vuetify component globally using the `components` option. This can be done with a string for the component name or an array containing a single component name.

```typescript
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      components: 'VDialog' // or ['VDialog']
    }
  }
})
```

--------------------------------

### Disable Automatic Vuetify Configuration Loading with Object Notation

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/configuration/vuetify-options.md

You can also disable automatic configuration loading using object notation by setting `config: false`. This approach is suitable when not using the `defineVuetifyConfiguration` helper.

```typescript
import type { ExternalVuetifyOptions } from 'vuetify-nuxt-module'

export default {
  config: false
  /* vuetify options */
} satisfies ExternalVuetifyOptions
```

--------------------------------

### Load Custom Locale Messages via Nuxt Plugin

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/advanced/locale-messages.md

Load custom Vuetify locale messages from a Nuxt plugin by hooking into the `vuetify:before-create` event. This method is useful for managing larger or more complex message structures.

```typescript
import sv from './i18n/vuetify/sv'
import { defineNuxtPlugin } from '#imports'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('vuetify:before-create', ({ vuetifyOptions }) => {
    vuetifyOptions.locale.messages.sv = sv
  })
})
```

--------------------------------

### Update Vuetify Options Before Creation

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/advanced/runtime-hooks.md

Use the `vuetify:before-create` hook in a Nuxt plugin to modify Vuetify options before the Vuetify instance is created. This allows for dynamic configuration.

```ts
import { defineNuxtPlugin } from '#imports'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('vuetify:before-create', ({ vuetifyOptions }) => {
    // update vuetifyOptions
  })
})
```

--------------------------------

### Register Single Vuetify Lab Component

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/globals/lab-components.md

Register a specific Vuetify lab component, such as `VDataTable`, by providing its name as a string or within an array in `nuxt.config.ts`.

```typescript
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      labComponents: 'VDataTable' // or ['VDataTable']
    }
  }
})
```

--------------------------------

### Configure Default Material Design Icons

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/svg-icons.md

Set the default SVG icon set to 'mdi-svg' in your `nuxt.config.ts` file. This requires the `@mdi/js` dependency.

```ts
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: 'mdi-svg'
      }
    }
  }
})
```

--------------------------------

### Register Multiple Vuetify Directives

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/globals/directives.md

Register multiple specific Vuetify directives by providing an array of directive names. This allows for granular control over which directives are included.

```typescript
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      directives: ['Ripple', 'Resize']
    }
  }
})
```

--------------------------------

### Register Vuetify Module using Nuxt Hook

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/advanced/layers-and-hooks.md

Within a custom Nuxt module, use the `vuetify:registerModule` hook to programmatically register Vuetify module options and Vuetify options. This allows for dynamic configuration loading.

```typescript
export default defineNuxtModule({
  setup(_options, nuxt) {
    nuxt.hook('vuetify:registerModule', register => register({
      moduleOptions: {
        /* module specific options */
      },
      vuetifyOptions: {
        /* vuetify options */
      },
    }))
  },
})
```

--------------------------------

### Configure Vuetify 4 Style Features

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/styling/common-setup.md

For Vuetify 4, you can selectively enable or disable style features like 'colors' and 'utilities'. These options are only available for Vuetify 4.

```typescript
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    moduleOptions: {
      styles: {
        colors: false,
        utilities: false
      }
    }
  }
})
```

--------------------------------

### Configure Vuetify Locale Messages

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/advanced/locale-messages.md

Load 'zhHans' and 'pl' Vuetify locale messages directly in the nuxt.config.ts file. This configuration sets the default locale to 'zhHans' with 'sv' as a fallback.

```typescript
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: [
    'vuetify-nuxt-module'
  ],
  vuetify: {
    moduleOptions: {
      /* module specific options */
    },
    vuetifyOptions: {
      locale: {
        locale: 'zhHans',
        fallback: 'sv',
      },
      localeMessages: ['zhHans', 'pl'],
      /* other vuetify options */
    }
  }
})
```

--------------------------------

### Register a Single Vuetify Directive

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/globals/directives.md

Configure to register a single Vuetify directive like 'Ripple'. You can use either a string for a single directive or an array notation.

```typescript
export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      directives: 'Ripple' // or ['Ripple']
    }
  }
})
```

--------------------------------

### Configure Default Font Awesome SVG Icons

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/svg-icons.md

Set the default SVG icon set to 'fa-svg' in `nuxt.config.ts`. This requires `@fortawesome/fontawesome-svg-core`, `@fortawesome/vue-fontawesome`, and a Font Awesome icon package like `@fortawesome/free-solid-svg-icons`.

```ts
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: 'fa-svg'
      }
    }
  }
})
```

--------------------------------

### Vuetify Module Options Interface

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/index.md

Defines the TypeScript interface for configuring Vuetify within a Nuxt application. It extends Vuetify's options and adds Nuxt-specific configurations.

```typescript
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
}
```

--------------------------------

### Override Default Icons with Custom Icons

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/features/icons/unocss-preset-icons.md

Override default icons or add new ones by mapping icon names to their UnoCSS identifiers in `nuxt.config.ts`. Remember to include the collection name and prefix.

```typescript
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'
        }
      }
    }
  }
})
```

--------------------------------

### Disable Automatic Vuetify Configuration Loading

Source: https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/configuration/vuetify-options.md

To prevent the Vuetify Nuxt module from automatically loading a configuration file, set `config: false` within your Vuetify options. This is useful when you are explicitly defining options elsewhere.

```typescript
import { defineVuetifyConfiguration } from 'vuetify-nuxt-module/custom-configuration'

export default defineVuetifyConfiguration({
  config: false
  /* other vuetify options */
})
```