Internationalization

Once you install and configure the @nuxtjs/i18n Nuxt module, you can start using Vuetify's 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 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 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.

Using Vuetify translations

For better performance, it is recommended to enable lazy loading; please see the 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:

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:

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):

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 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.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:

config/i18n.config.ts

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