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.

Check Using Vuetify translations example.

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

WARNING

Before following the instructions below, read the Contribution Guide.

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: {
      en,
      es,
      ar,
    },
  }
})

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:

   pnpm install && pnpm prepack

• change to the vuetify-locale-playground folder:

  cd vuetify-locale-playground

• from the vuetify-locale-playground folder run:

  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',
  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, from root folder run:

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

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

  pnpm install && pnpm dev:prepare:multiple-json && pnpm 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