Internationalization

WARNING

From version v0.8.0, this module requires latest @nuxtjs/i18n Nuxt module: ^8.0.0.

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

TIP

NOTE: You need to provide the translations by yourself. The module won't provide them automatically. You can include the translations from vuetify/locale or add your own ones.

Examples

Basic configuration

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:

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: {
    locales: [{
      code: 'en-US',
      iso: 'en-US',
      file: 'en-US.json',
      name: 'English',
      dir: 'ltr',
    }, {
      code: 'es-ES',
      iso: 'es-ES',
      file: 'es-ES.json',
      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',
  fallbackWarn: true
}

Playground

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

You can run the playground using single or multiple json files per locale:

• for single file per locale, run from root folder:

   pnpm install && nr dev:prepare && nr dev

• for multiple files per locale, run from root folder:

  pnpm install && nr dev:prepare:multiple-json && nr dev:multiple-json

You can find inside locales folder the json files used in the playground:

• using single subfolder when running nr dev
• using multiple subfolder when running dev:multiple-json