Document home

Vue

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:

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:

GitHub/Directory Description Notes
vue-i18n Simple multilingual Hello World Vue application using vue-i18n
Try this first!
sport Localized application using vue-i18n and consuming a multilingual Sport API.
Learn more about the application from here.