@nuxtjs/i18n

What is @nuxtjs/i18n?

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

What are @nuxtjs/i18n's main functionalities?

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"
    }
  }
}

Other packages similar to @nuxtjs/i18n

vue-i18n

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

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

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.

README

Nuxt I18n

Module i18n for Nuxt

The next @nuxtjs/i18n for Nuxt 3

✅ Status: v8 beta

If you would like to use the stable version for Nuxt 2, please see the main branch

🚀 Usage

Install with next tag

1. Add the following line to the devDependencies wiht package manager:

# Using npm
npm install @nuxtjs/i18n@next --save-dev

# Using yarn
yarn add --dev @nuxtjs/i18n@next

# Using pnpm 
pnpm install --shamefully-hoist -D @nuxtjs/i18n@next

1. Add @nuxtjs/i18n to the modules section of nuxt.config.ts

{
  modules: [
    '@nuxtjs/i18n',
  ],
}

Install edge version

1. Add the following line to the devDependencies in package.json:

"@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge"

1. Run npm install or yarn or pnpm install --shamefully-hoist.

2. Add @nuxtjs/i18n to the modules section of nuxt.config.ts

{
  modules: [
    '@nuxtjs/i18n',
  ],
}

📖 Documentation

Read more v8 documentation.

Keep in mind that not all features are supported yet and some things might be broken.

🔗 Links

• 📘 Documentation for v8
• 📘 Documentation for v7
• 🔖 Release notes
• 👥 Community (#i18n channel)

©️ License

MIT License - Copyright (c) Nuxt Community

Changelog

v8.0.0-beta.7 (2022-12-08T01:11:15Z)

This changelog is generated by GitHub Releases

   🚀 Features

• docs: Upgrade to latest Docus  -  by @Tahul in https://github.com/nuxt-modules/i18n/issues/1702 <samp>(dfceb)</samp>

   🐞 Bug Fixes

• Missing dependency modules such as vue-i18n-routing and@intlify/vue-*  -  by @kazupon in https://github.com/nuxt-modules/i18n/issues/1692 <samp>(563d6)</samp>
• Lazy loading for fallback locale  -  by @kazupon in https://github.com/nuxt-modules/i18n/issues/1694 <samp>(d43ee)</samp>
• Optimize tree-shaking for vue-i18n related modules  -  by @kazupon in https://github.com/nuxt-modules/i18n/issues/1699 <samp>(8d278)</samp>