nuxt-i18n-module

Internationalization module for Nuxt, with support for generating dynamic routes (SSR).

About

Adds the vue-i18n plugin, language-specific routes and html headers.

Given a page "foo":

└── pages
    └── foo.vue

This module will dynamically generate routes for a set of languages:

• /en/foo: English version of the "foo" page.
• /de/foo: German version of the "foo" page.
• /foo: This page will detect the user's language on the client side and redirect to the appropriate language-URL if redirectDefaultLang is set to true.

Those routes will also be generated when rendering in SSR mode.

What about nuxt-community/nuxt-i18n?

The only advantage of this module over the official nuxt-community/nuxt-i18n is that it can generate translated versions of dynamic routes. See nuxt-i18n#21 for more details.

If you don't need to generate dynamic routes I recommend using the official module instead.

Installation & Configuration

Setup

1: Add nuxt-i18n-module dependency to your project using yarn or npm.

2: Add nuxt-i18n-module to the modules section of nuxt.config.js and configure as desired:

{
  modules: [
    ['nuxt-i18n-module', {
      languages: ['en', 'de']
    }]
  ]
}

The available options are:

Name	Type	Default	Description
languages	string[]	["en"]	List of languages
defaultLanguage	string	First language	Default language
dateTimeFormats	Object	{}	Date time formats, see vue-i18n
numberFormats	Object	{}	Number formats, see vue-i18n
redirectDefaultLang	boolean	true	Redirect default lang to localized url (eg: redirect / to /en when en is your default language)
rootUrl	?string	null	Root URL to prepend to alternate links. Required by Google.

3: Create files assets/locale/en.json and assets/locale/de.json with your global translation phrases. For example:

{
  "hello-world": "Hallo Welt!"
}

Usage

Localized Links (localePath())

URLs within the application need to be localized. To link to a URL in the current language, use localePath():

<nuxt-link :to="localePath('/foo')">Foo</nuxt-link>

Translate Phrases ($t())

To translate a phrase, use vue-i18n's $t():

<h1>{{ $t('hello-world') }}</h1>

Language Switcher (i18n-switcher)

The language switcher prints a list of links leading to translations of the current page in other languages:

<i18n-switcher/>

Vuex Store

This module registers a Vuex store module with the name i18n. It exposes the following functionality:

• Mutation setLanguage(lang)
• Getter getLanguage()

Development

Install dependencies:

yarn install

Run tests:

yarn run test

Tests build and generate Nuxt sites and check their HTML output. Sometimes it can be useful to inspect the generated sites manually. For that just serve the test's output folder, for example using the "serve" package:

npx serve test/tmp/nuxt.config-default/nuxt-generate/

Release a new version:

1. Bump the version in package.json
2. Commit, tag and push to master:

git commit -am 'version <version>'
git tag --annotate v<version>
git push --follow-tags

3. Travis will deploy to NPM