Soluling home   Document home

Vue Localization and Internationalization

Vue (Wikipedia) is a very popular JavaScript framework to build browser applications. There is no built-in localization support in Vue, but you have to use a 3rd party implementation. The most common add-ons are vue-i18n and vue-i18next. No matter which one of these 3rd party add-ons you use, Soluling localization tool and service support Vue.

The end of the document contains links to get the full source code of the samples.

Process

vue-i18n

Install vue-i18n.

vue add i18n

Now you have to answer some questions:

• The locale of the project. Select en
• The fallback locale that is used if there is no translations. Select en
• The directory where to store I18N strings file: src\locales
• Enable I18N strings in a single file component. Select n

vue-i18n makes some changes to you project.

Resource you templates.

<template>

  <p>Hello World</p>

</template>

Add "Hello World" into src\locales\en.json

{
 "hello": "Hello World"
}

Change it to

<template>

  <p>{{ $t('hello') }}</p>

</template>

Language select.

Lazy loading.

Samples

GitHub and <data-dir>\Samples\Vue contains following Vue samples: