Add Multi-language support to Vue Typescript - Part 4

typescript VueJS stutorial

Other articles in the series

  • Making our UI user friendly - Part 15
  • Deploying Phoenix VueJS application using Docker - Part 14
  • Fixing failing Elixir tests - Part 13
  • Adding new features to Order Management - Part 12
  • Add Order Management - Part 11
  • Refactoring and adding tests for Phoenix - Part 10
  • Refactoring VueJS with Typescript- Part 9
  • Add Customer Management - Part 8
  • Writing tests with Jest and Typescript - Part 7
  • Adding Vuex to Vue using Typescript - Part 6
  • Building our Homepage view component - Part 5
  • Add Multi-language support to Vue Typescript - Part 4
  • Generate Vue Typescript Application - Part 3
  • Setting up Models with Ecto and Adding Routing . Part 2
  • Setting up Your Phoenix Application - Part 1
  • Tutorial Series for building a VueJS (Typescript) and Phoenix(Elixir) Shop Management Application - Part 0

  • The front-end related code for this post is available at here.

    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.

    ├── 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({
      render: (h) => h(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.

      <div class="about">
        <h1>This is an about page</h1>
        <p>{{ $t('hello') }}</p>
        <p>{{ $t('message') }}</p> <!-- Comes from locales/de.json -->
    <script lang="ts">
    import { Component, Vue } from 'vue-property-decorator'
    export default class HelloI18n extends Vue {
    // This tag allows embedding translations directly in .vue files.
      "de": {
        "hello": "Hallo i18n von SFC!"

    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.