Internationalization module for Nuxt.
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.
Those routes will also be generated when rendering in SSR mode.
- Add
nuxt-i18n-module
dependency using yarn or npm to your project - Add
nuxt-i18n-module
tomodules
section ofnuxt.config.js
and define the languages to use:
{
modules: [
['nuxt-i18n-module', {
languages: ['en', 'de']
}]
]
}
- Create files
assets/locale/en.json
andassets/locale/de.json
with your global translation phrases. For example:
{
"hello-world": "Hallo Welt!"
}
To point to a URL in the currently active language, use localePath()
:
<nuxt-link :to="localePath('/foo')">Foo</nuxt-link>
To translate a phrase, use vue-i18n's $t()
:
<h1>{{ $t('hello-world') }}</h1>
Install dependencies:
yarn install
Run tests:
npm run test
Release a new version:
- Bump the version in
package.json
, merge to master. - Push a new tag to master.
- Travis will deploy to NPM.