How to use vue-i18n - 10 common examples

/// 

const assert = console.assert;
const random = () => Math.trunc(Math.exp(Math.log(Date.now()) * Math.random()));

import Vue, { ComponentOptions } from 'vue';
import * as VueI18n from 'vue-i18n';

/**
 * VueI18n.install
 */
Vue.use(VueI18n);
VueI18n.install(Vue);

/**
 * VueI18n.version
 */
assert(typeof VueI18n.version === 'string');

/**
 * VueI18n Instance
 */
const locale = random().toString();
const key = `_${random()}`;
const value = `${random()}|${random()}|${random()}`;
const i18n = new VueI18n({
  locale,
  fallbackLocale: locale,
  messages: {

messages,
  attributes: {
    first_name: 'First Name',
    last_name: 'Last Name',
    email: 'Email',
    'address.street': 'Street',
    'address.city': 'City',
    'address.postal': 'Postal Code',
    'phones.model': 'Phone Model'
  }
  // validationKeys: configs.laravel
})
Vue.use(VueI18n)

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages: i18nMessages // set locale messages
})

new Vue({
  el: '#app',
  render: h => h(testForm),
  i18n
})

Vue.use(VueI18n);

        let startLanguage;
        for (const lang of languagesPriority) {
            if (this.languages[lang]) {
                startLanguage = lang;
                break;
            }
        }

        if (!startLanguage) {
            startLanguage = this.defaultLanguage;
        }

        const i18n = new VueI18n({
            locale: startLanguage,
            messages: this.languages,
        });

        i18n.setLocaleMessage(startLanguage, require('~assets/i18n/' + startLanguage + '.json'));

        if (module.hot) {
            module.hot.accept(['~assets/i18n/en.json', '~assets/i18n/ru.json', '~assets/i18n/uk.json'], () => {
                i18n.setLocaleMessage('en', require('~assets/i18n/en.json'));
                i18n.setLocaleMessage('ru', require('~assets/i18n/ru.json'));
                i18n.setLocaleMessage('uk', require('~assets/i18n/uk.json'));
                // console.log('hot reload', this, arguments);
            });
        }

        return i18n;

if (!initialSetup && strategy !== STRATEGIES.NO_PREFIX) {
      const redirectPath = app.switchLocalePath(newLocale) || app.localePath('index', newLocale)
      const redirectRoute = app.router.resolve(redirectPath).route

      // Must retrieve from context as it might have changed since plugin initialization.
      const { route } = context

      if (route && !isSameRoute(route, redirectRoute)) {
        redirect(redirectPath)
      }
    }
  }

  // Set instance options
  app.i18n = new VueI18n(vueI18n)
  app.i18n.locales = locales
  app.i18n.defaultLocale = defaultLocale
  app.i18n.differentDomains = differentDomains
  app.i18n.forwardedHost = forwardedHost
  app.i18n.beforeLanguageSwitch = beforeLanguageSwitch
  app.i18n.onLanguageSwitched = onLanguageSwitched
  app.i18n.setLocaleCookie = setLocaleCookie
  app.i18n.getLocaleCookie = getLocaleCookie
  app.i18n.setLocale = (locale) => loadAndSetLocale(locale)

  // Inject seo function
  Vue.prototype.$nuxtI18nSeo = nuxtI18nSeo

  if (store) {
    // Inject in store.
    store.$i18n = app.i18n

// 自动根据浏览器系统语言设置语言
const navLang = navigator.language
const localLang = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false
let lang = localLang || localRead('local') || 'zh-CN'

Vue.config.lang = lang ? lang : 'zh-CN'

// vue-i18n 6.x+写法
Vue.locale = () => {}
const messages = {
  'zh-CN': Object.assign(zhCnLocale, customZhCn),
  'zh-TW': Object.assign(zhTwLocale, customZhTw),
  'en-US': Object.assign(enUsLocale, customEnUs)
}

const i18n = new VueI18n({
  locale: lang,
  messages
})

export default i18n

// vue-i18n 5.x写法
// Vue.locale('zh-CN', Object.assign(zhCnLocale, customZhCn))
// Vue.locale('en-US', Object.assign(zhTwLocale, customZhTw))
// Vue.locale('zh-TW', Object.assign(enUsLocale, customEnUs))

// 自动根据浏览器系统语言设置语言
const navLang = navigator.language
const localLang = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false
const lang = localLang || localRead('local') || 'zh-CN'

Vue.config.lang = lang

// vue-i18n 6.x+写法
Vue.locale = () => {}
const messages = {
  'zh-CN': Object.assign(zhCnLocale, customZhCn),
  'zh-TW': Object.assign(zhTwLocale, customZhTw),
  'en-US': Object.assign(enUsLocale, customEnUs)
}
const i18n = new VueI18n({
  locale: lang,
  messages
})

export default i18n

// vue-i18n 5.x写法
// Vue.locale('zh-CN', Object.assign(zhCnLocale, customZhCn))
// Vue.locale('en-US', Object.assign(zhTwLocale, customZhTw))
// Vue.locale('zh-TW', Object.assign(enUsLocale, customEnUs))

import ClientStorage from '@/utils/ClientStorage';

Vue.use(VueI18n);

export const supportedLanguages = {
    "en-US": "English",
    "bg-BG": "Български",
    "de-DE": "Deutsch",
    "nl-NL": "Nederlands",
    "pt-BR": "Português",
};

// Extend the internal `VueI18n._translate` method in order to
// populate the source language messages on runtime
const sourceMessages = {};
const i18nTranslate = VueI18n.prototype._translate;
VueI18n.prototype._translate = function (messages, locale, fallback, key, host, interpolateMode, args) {
    if (!sourceMessages[key]) {
        sourceMessages[key] = key;
    }

    return i18nTranslate.apply(this, arguments);
};

const defaultLanguage = Object.keys(supportedLanguages)[0];

const i18nMessages = {};
i18nMessages[defaultLanguage] = sourceMessages;

// Create VueI18n instance
export const i18n = new VueI18n({
    locale:         defaultLanguage,

Vue.use(VueI18n);

export const supportedLanguages = {
    "en-US": "English",
    "bg-BG": "Български",
    "de-DE": "Deutsch",
    "nl-NL": "Nederlands",
    "pt-BR": "Português",
};

// Extend the internal `VueI18n._translate` method in order to
// populate the source language messages on runtime
const sourceMessages = {};
const i18nTranslate = VueI18n.prototype._translate;
VueI18n.prototype._translate = function (messages, locale, fallback, key, host, interpolateMode, args) {
    if (!sourceMessages[key]) {
        sourceMessages[key] = key;
    }

    return i18nTranslate.apply(this, arguments);
};

const defaultLanguage = Object.keys(supportedLanguages)[0];

const i18nMessages = {};
i18nMessages[defaultLanguage] = sourceMessages;

// Create VueI18n instance
export const i18n = new VueI18n({
    locale:         defaultLanguage,
    fallbackLocale: defaultLanguage,

}

require('./bootstrap');

window.Vue = require('vue');
window.Multiselect = require('vue-multiselect');
window.path = require('path');
window.cStore = require('./store/customizer').default;

import VTooltip from 'v-tooltip';
import ToggleButton from 'vue-js-toggle-button';
import VueTimeago from 'vue-timeago';
//import Vuex from 'vuex';
//Vue.use(Vuex);

window.VueInternationalization = require('vue-i18n').default;
window.Locale = require('./vue-i18n-locales.generated').default;
Vue.use(VueInternationalization);

window.i18n = new VueInternationalization({
	locale: document.documentElement.lang,
	fallbackLocale: 'en',
	messages: Locale,
});

Vue.use(VTooltip);
Vue.use(ToggleButton);
Vue.use(VueTimeago, {
  locale: 'en', // Default locale
  locales: {
    'fr': require('date-fns/locale/fr'),
    'de': require('date-fns/locale/de'),

const assert = console.assert;
const random = () => Math.trunc(Math.exp(Math.log(Date.now()) * Math.random()));

import Vue, { ComponentOptions } from 'vue';
import * as VueI18n from 'vue-i18n';

/**
 * VueI18n.install
 */
Vue.use(VueI18n);
VueI18n.install(Vue);

/**
 * VueI18n.version
 */
assert(typeof VueI18n.version === 'string');

/**
 * VueI18n Instance
 */
const locale = random().toString();
const key = `_${random()}`;
const value = `${random()}|${random()}|${random()}`;
const i18n = new VueI18n({
  locale,
  fallbackLocale: locale,
  messages: {
    [locale]: {
      [key]: value,
    },
  },
  formatter: {