Internationalization ​

Install and configure @nuxtjs/i18n Nuxt module, and you're ready to use Vuetify internationalization features.

Examples ​

The @nuxtjs/i18n module, from version 8.0.0.beta.13+ , requires splitting Nuxt ( @nuxtjs/i18n ) and Vue ( vue-i18n ) configuration files. In the previous beta versions, we could use a single configuration file, but now we need to split them, check the corresponding Nuxt configuration in the following examples.

If you want to run any playground in your local, check the contributing guide , download/clone to your local machine the GitHub repo (node 18+ required to build the Nuxt module).

Using Vuetify translations ​

You should use lazy loading , check Lazy loading configuration example.

Nuxt configuration ​

Add the @nuxtjs/i18n and vuetify-nuxt-module modules and configure them using i18n and vuetify options respectively.

The following example is using json files for the internationalization messages:

// Nuxt config file
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 move it to the root folder (remember to update i18n.vueI18n option), following with the previous Nuxt configuration:

// 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: {
})

i18n folders ​

Vuetify messages must be added under the $vuetify key, adding your application messages to the root: you can access to Vuetify messages using $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):

// 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

Playground ​

You can check the Nuxt configuration in the Nuxt config file in the Vuetify locale playground folder, and the Vue configuration file inside the example root folder.

You can run the playground using:

• run from root folder:
  shell

   pnpm install && pnpm prepack

• change to the vuetify-locale-playground folder:
  shell

  cd vuetify-locale-playground

• from the vuetify-locale-playground folder run:
  shell

  pnpm dev:prepare && pnpm dev

You can find inside locales folder the TypeScript and JSON files used in the playground.

Lazy loading configuration ​

This example shows how to use the lazy loading 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 :

// Nuxt config file
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:

// I18n config file (vue-i18n): ./config/i18n.config.ts
export default {
  legacy: false,
  availableLocales: ['en-US', 'es-ES'],
  fallbackLocale: 'en-US',