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. After reading this document, we recommend reading a tutorial about how to use Soluling.

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: