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