@unvuetify/nuxt-i18n-utils

@unvuetify/nuxt-i18n-utils

Nuxt I18n utilities.

📦 Install

# pnpm
pnpm add @unvuetify/nuxt-i18n-utils

# npm
npm i @unvuetify/nuxt-i18n-utils

# yarn
yarn add @unvuetify/nuxt-i18n-utils

# bun
bun add @unvuetify/nuxt-i18n-utils

🦄 Usage

We suggest you to use vuetify-nuxt-module, there are a lot of options to configure Vuetify including SSR support and HTTP Client Hints.

If you just want to use Vuetify with @nuxtjs/i18n, you can use the configureI18n function in a new module, create the following module in your Nuxt modules folder:

// modules/vuetify.ts
import type { VuetifyNuxtOptions } from '@unvuetify/nuxt-utils'
import { defineNuxtModule } from '@nuxt/kit'
import { configureI18n } from '@unvuetify/nuxt-i18n-utils'
import { configureVuetify } from '@unvuetify/nuxt-utils'

export interface ModuleOptions extends VuetifyNuxtOptions {
}

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: 'vuetify:nuxt-module',
    configKey: 'vuetify',
    compatibility: {
      nuxt: '>=3.0.0',
    },
    default: {},
  },
  setup(options, nuxt) {
    configureVuetify(nuxt, options)
    configureI18n(nuxt)
  },
})

then, run the nuxt/nuxi prepare command and add the options to your nuxt.config.ts using the vuetify key:

// nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    /* i18n options */
  },
  /* other nuxt options */
  vuetify: {
    composables: { /* composables options */ },
    components: { /* components options */ },
    directives: { /* directives options */ },
    styles: { /* styles options */ }
  }
})

and finally, you also need to add a Nuxt plugin to register the Vuetify plugin:

// plugins/vuetify.ts
import type { VuetifyOptions } from 'vuetify'
import { configureVuetifyI18nAdapter } from '@unvuetify/nuxt-i18n-utils/runtime'
import { createVuetify } from 'vuetify'

export default defineNuxtPlugin((nuxtApp) => {
  const options = {
    theme: {
      defaultTheme: 'dark',
    },
  } satisfies VuetifyOptions
  configureVuetifyI18nAdapter(options)
  const vuetify = createVuetify(options)
  nuxtApp.vueApp.use(vuetify)
})

Check the nuxt-i18n playground:

• nuxt-i18n

Nuxt I18n v8 support

If you want to use @nuxtjs/i18n version 8, you need to pin Nuxt and Vuetify versions, otherwise you will get unhead version 2 errors:

• Nuxt 3.15.4 or any previous version: Nuxt 3.16.0 updated to use unhead version 2
• Vuetify 3.7.16 or any previous version: Vuetify 3.7.17 updated to use unhead version 2

{
  "dependencies": {
    "@nuxtjs/i18n": "^8",
    "nuxt": "3.15.4",
    "vuetify": "3.7.16"
  }
}

If you want to prefix Vuetify directives, you will need to override unimport to use ^5.0.1 version via resolutions or pnpm.overrides in your package.json file (via @unvuetify/unimport-presets):

{
  "resolutions": {
    "unimport": "^5.0.1"
  }
}

📄 License

MIT License © 2025-PRESENT Joaquín Sánchez