vue-i18n — Fallback Localization and Local Translations

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at how to create multilingual Vue apps with vue-i18n.

Fallback Localization

We can set a fallbackLocale in case the string isn’t available.

vue-18n has implicit fallback locale.

A more specific locale would fall back to the more general of the same kind.

For example, de-DE would fall back to de .

We can also specify fallback locales explicitly using the fallbackLocale property.

For instances, we can write:

import Vue from "vue";
import App from "./App.vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n);
Vue.config.productionTip = false;

const messages = {
  en: {
    foo: "hello"
  },
  fr: {}
};

const i18n = new VueI18n({
  messages,
  locale: "fr",
  fallbackLocale: "en"
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount("#app");

Then we write:

<template>
  <div id="app">
    <p>{{ $t('foo') }}</p>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Then we see hello displayed because our fallback locale is en .

fallbackLocale can also be an array, so we can write:

import Vue from "vue";
import App from "./App.vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n);
Vue.config.productionTip = false;

const messages = {
  en: {
    foo: "hello"
  },
  fr: {},
  ja: {}
};

const i18n = new VueI18n({
  messages,
  locale: "fr",
  fallbackLocale: ["fr", "en"]
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount("#app");

It can also be an object with a list of fallback locales.

The key is the locale and the value is its fallback.

For example, we can write:

import Vue from "vue";
import App from "./App.vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n);
Vue.config.productionTip = false;

const messages = {
  en: {
    foo: "hello"
  }
};

const i18n = new VueI18n({
  messages,
  locale: "fr",
  fallbackLocale: {
    "de-CH": ["fr", "it"],
    default: ["en", "da"]
  }
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount("#app");

Then de-CH falls back to fr or it . If those aren’t available, then it falls back to en or da .

Fallback Interpolation

Fallback locales can have their own interpolation.

We’ve to put the interpolation in the key.

For example, we can write:

import Vue from "vue";
import App from "./App.vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n);
Vue.config.productionTip = false;

const messages = {
  en: {
    "hello {name}": "hello {name}"
  }
};

const i18n = new VueI18n({
  messages,
  locale: "fr"
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount("#app");

Then in our template, we write:

<template>
  <div id="app">
    <p>{{ $t('hello {name}', { name: 'james' }) }}</p>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Component-Based Localization

We can localization that’s only in a component.

For instance, we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n);
Vue.config.productionTip = false;

const messages = {
  en: {
    "hello {name}": "hello {name}"
  }
};

const i18n = new VueI18n({
  messages,
  locale: "fr"
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <p>{{ $t('message.welcome') }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  i18n: {
    messages: {
      en: { message: { welcome: "welcome" } },
      fr: { message: { welcome: "bienvenu" } }
    }
  }
};
</script>

We added an i18n prooperty in our component to provide local translations.

The messages property has the translations.

Then we define the translations as usual.

Since locale is set to 'fr' , we get bienvenu on the screen.

These translations can be saved in another module and imported.

For instance, we can write:

messages.js

export default {
  en: { message: { welcome: "welcome" } },
  fr: { message: { welcome: "bienvenu" } }
};

App.vue

<template>
  <div id="app">
    <p>{{ $t('message.welcome') }}</p>
  </div>
</template>

<script>
import messages from "./messages";
export default {
  name: "App",
  i18n: {
    messages
  }
};
</script>

We can use parent.$t to get translations in a function component.

For instance, we can write:

<div>{{ parent.$t('message.hello') }}</div>

to get the translation in a function component.

Conclusion

We can get translations in various ways.

One way is to get them from fallback locales.

We can define them as objects, arrays, or strings.

Also, we can have translations that are exclusive to some components.