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.




Install vue-i18n.

vue add i18n

Now you have to answer some questions:

vue-i18n makes some changes to you project.

Resource you templates.

<p>Hello World</p>

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

 "hello": "Hello World"

Change it to

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

Language select.

Lazy loading.


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.