![]() |
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:
en
en
src\locales
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.
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. |