@nuxtjs/i18n
Advanced tools
@nuxtjs/i18n is a Nuxt.js module that provides internationalization (i18n) support for your Nuxt.js applications. It allows you to easily add multilingual support to your application, manage translations, and handle locale switching.
Basic Setup
This code demonstrates the basic setup of the @nuxtjs/i18n module in a Nuxt.js project. It configures two locales (English and French) and sets English as the default locale. It also provides translation messages for the 'welcome' key in both languages.
{
"modules": [
"@nuxtjs/i18n"
],
"i18n": {
"locales": [
{ "code": "en", "name": "English" },
{ "code": "fr", "name": "Français" }
],
"defaultLocale": "en",
"vueI18n": {
"fallbackLocale": "en",
"messages": {
"en": { "welcome": "Welcome" },
"fr": { "welcome": "Bienvenue" }
}
}
}
}Locale Switching
This code demonstrates how to switch between locales in a Nuxt.js component using @nuxtjs/i18n. The $t function is used to translate the 'welcome' key, and the $i18n.setLocale method is used to change the current locale.
<template>
<div>
<p>{{ $t('welcome') }}</p>
<button @click="$i18n.setLocale('en')">English</button>
<button @click="$i18n.setLocale('fr')">Français</button>
</div>
</template>Dynamic Route Localization
This code demonstrates how to configure dynamic route localization with @nuxtjs/i18n. It maps the root path ('/') to '/accueil' for the French locale, allowing for localized URLs.
{
"pages": {
"index": {
"en": "/",
"fr": "/accueil"
}
}
}vue-i18n is a powerful internationalization plugin for Vue.js. It provides similar functionalities to @nuxtjs/i18n but is not specifically tailored for Nuxt.js. It requires more manual setup when used with Nuxt.js compared to the seamless integration provided by @nuxtjs/i18n.
react-i18next is a popular internationalization library for React applications. It offers similar features such as translation management and locale switching. However, it is designed for React and not directly compatible with Nuxt.js, which is based on Vue.js.
next-i18next is an internationalization library for Next.js, a React framework. It provides similar functionalities to @nuxtjs/i18n but is specifically designed for Next.js applications, making it a better fit for React-based projects.
i18n for your Nuxt project
#i18n channel)yarn add @nuxtjs/i18n # yarn
npm i @nuxtjs/i18n # npm
Firstly, you need to add @nuxtjs/i18n to your Nuxt config.
// nuxt.config.js
{
modules: [
[
'@nuxtjs/i18n',
{
locales: ['en', 'es'],
defaultLocale: 'en',
vueI18n: {
fallbackLocale: 'en',
messages: {
en: {
greeting: 'Hello world!'
},
es: {
greeting: '¡Hola mundo!'
}
}
}
}
]
]
}
Then you can start using @nuxtjs/i18n in your Vue components!
<template>
<main>
<h1>{{ $t('greeting') }}</h1>
<nuxt-link
v-if="$i18n.locale !== 'en'"
:to="switchLocalePath('en')"
>
English
</nuxt-link>
<nuxt-link
v-if="$i18n.locale !== 'es'"
:to="switchLocalePath('es')"
>
Español
</nuxt-link>
</main>
</template>
If you would like to find out more about how to use @nuxtjs/i18n, check out the docs!
If you have any questions or issues, check out the #i18n channel on Discord server.
MIT License - Copyright (c) Nuxt Community
7.2.1 (2022-04-01)
FAQs
Internationalization for Nuxt
The npm package @nuxtjs/i18n receives a total of 186,876 weekly downloads. As such, @nuxtjs/i18n popularity was classified as popular.
We found that @nuxtjs/i18n demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.