Table of contents

• Where are the locale files?
• How it Work
  • Js files
  • Vue files

Internationalization (i18n) is the process of developing products in such a way that they can be localized for languages and cultures easily.

• We use vue-i18n

Where are the locale files?

Locale files can be found in src/i18n/lang directory. Currently, supported languages are English, French and Vietnamese.

How it Work

Js files

Import your language file into src/i18n/index.js.

import en from "@/i18n/lang/en.json";

Add it to the messages object.

export const i18n = new VueI18n({
  locale: 'en',
  messages: { en }
});

Vue files

It is pretty easy to translate phrases in .vue files:

  <h1>{{ $t('OpenPaaS Login') }}</h1>  

Atribute syntax:

• Use v-bind or the : shortcut with $t('some text')

<v-text-field
        name="login"
        :label="$t('Login')"
        type="text"
></v-text-field>

Check the documentation of vue-I18n and vue-I18n starter for more examples.