Add Multi-language support to Vue Typescript - Part 4

Setting up multi-language support

The inventory manager we will be building should be able to support multiple languages. We use vue-i18n, which comes with typescript support. It can be added using vue-cli.

vue add i18n

Here we choose to enable single page i18n support and provide de as fallback language. The resulting directory structure is as follows.

src
├── App.vue
├── assets
│   └── logo.png
├── components
│   ├── HelloI18n.vue
│   └── HelloWorld.vue
├── i18n.ts
├── locales
│   ├── de.json
│   └── en.json
├── main.ts
├── registerServiceWorker.ts
├── router.ts
├── shims-tsx.d.ts
├── shims-vue.d.ts
├── store.ts
└── views
    ├── About.vue
    └── Home.vue

i18n adds some new files which injects i18n into Vue app. The i18n.ts will automatically load i18n based on vue.config.js. The .env can be used to put the environment variable to configure the application. More info can be found here. The src/main.ts will be as follows.

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
import i18n from './i18n'

Vue.config.productionTip = false;

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

We also got a new locales folder for storing our translations. Currently we have de.json and en.json corresponding to German and English respectively.

Contents of locales/de.json is as follows.

{
  "message": "hallo von JSON"
}

Now lets move the content of newly created HelloI18n.vue to About.vue, so that we can see it action. We also take value from locales/de.json in $t(‘message’), as we haven’t provided translations in en and Vue fallbacks to de. The resulting About.vue is as follows.

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('message') }}</p> <!-- Comes from locales/de.json -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class HelloI18n extends Vue {
}
</script>

// This tag allows embedding translations directly in .vue files.
<i18n>
{
  "de": {
    "hello": "Hallo i18n von SFC!"
  }
}
</i18n>

Now we should see a Hallo i18n von SFC! in our About page along with Hallo von JSON.

In next part, we will write our first Vue component.

Other articles in the series

Setting up multi-language support