Internationalization
WARNING
Requires latest @nuxtjs/i18n Nuxt module: 8.0.0.beta.13.
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 8.0.0.beta.13 requires to split Nuxt (@nuxtjs/i18n) and Vue (vue-i18n) configuration files. In the previous beta versions, we could use a single configuration file, but using the latest beta version, 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 */
}
}
})// 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
}// 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:shell
pnpm install && nr dev:prepare && nr devpnpm install && nr dev:prepare && nr dev - for multiple files per locale, run from root folder:shell
pnpm install && nr dev:prepare:multiple-json && nr dev:multiple-jsonpnpm install && nr dev:prepare:multiple-json && nr dev:multiple-json
You can find inside locales folder the json files used in the playground: