How to make internationalization your website on Vue@3 and Vue-i18n@9
Tags: vue, vuei18n, javascript, webdev
Published: 2022-04-24 04:59:01

# What this article shows you

- [I18n (Internationalization)](https://developer.mozilla.org/en-US/docs/Glossary/I18N) according to language setting in the browser
- I18n according to the user-selected language
  - Using two-way binding (Vue.js)
  - Using `addEventListener` (Javascript)

# Source code & Result

All source code in this article work on a static web page.

## Environment

- [Vue.js Ver.3](https://vuejs.org/)
- [Vue I18n Ver.9](https://vue-i18n.intlify.dev/index.html)

## I18n according to language setting in the browser
This source code was implemented based on [Vue I18n official Guide](https://vue-i18n.intlify.dev/guide/index.html) and [Issues on its Github repository](https://github.com/kazupon/vue-i18n/issues/220).

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Vue I18n Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="https://unpkg.com/vue-i18n@9"></script>
  </head>
  <body>
    <div id="yokan">
      <span> {{ $t("message.hello") }} </span>
    </div>
  </body>
  <script>
    /**
     * Get the language setting in your browser
     */
    const langBrowser = navigator.language.split("-")[0];
    console.log("Language setting in your browser is " + langBrowser + ".");

    const messages = {
      en: {
        message: {
          hello: "Hi!",
        },
      },
      ja: {
        message: {
          hello: "やあ！",
        },
      },
    };

    const i18n = VueI18n.createI18n({
      locale: langBrowser,
      fallbackLocale: "en",
      messages,
    });

    const app = Vue.createApp({});
    app.use(i18n);
    app.mount("#yokan");
  </script>
</html>
```

The result is the following.

![The result i18n according to browser setting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh2hr9shwd26fbpnoiap.png) 

## I18n according to the user-selected language
This section shows the website in the language the user select using `<select>` tag. This article indicates two source codes: "Using two-way binding (Vue.js)" and "Using `addEventListener` (Javascript)."

### Using two-way binding (Vue.js)
This source code was implemented based on [Vue I18n official Guide](https://vue-i18n.intlify.dev/guide/essentials/scope.html#global-scope-1) and [two-way binding in Vue.js](https://vuejs.org/api/built-in-directives.html#v-model).

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Vue I18n Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="https://unpkg.com/vue-i18n@9"></script>
  </head>
  <body>
    <div id="yokan">
      <span> {{ $t("message.hello") }} </span>
      <select
        v-model="selected"
        name="lang"
        class="legal-item"
        id="select-lang"
        v-on:change="switchLang"
      >
        <option value="en">English</option>
        <option value="ja">Japanese</option>
      </select>
    </div>
  </body>
  <script>
    /**
     * Get the language setting in your browser
     */
    const langBrowser = navigator.language.split("-")[0];
    console.log("The language setting in your browser is " + langBrowser + ".");

    const binding = {
      data() {
        return {
          selected: langBrowser,
        };
      },
      methods: {
        switchLang() {
          this.$i18n.locale = this.selected;
        },
      },
    };

    const messages = {
      en: {
        message: {
          hello: "Hi!",
        },
      },
      ja: {
        message: {
          hello: "やあ！",
        },
      },
    };

    const i18n = VueI18n.createI18n({
      locale: langBrowser,
      fallbackLocale: "en",
      messages,
    });

    const app = Vue.createApp(binding);
    app.use(i18n);
    const vm = app.mount("#yokan");
  </script>
</html>
```

The result is the following.


![Two-way binding implementation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwxhemsx5pcutkbhqat6.gif)

## Using `addEventListener` (Javascript)
The source code in this section was written based on [Vue I18n official Guide](https://vue-i18n.intlify.dev/guide/essentials/scope.html#global-scope-1) and [the question in stack overflow](https://stackoverflow.com/questions/55361211/how-can-i-translate-app-without-reloading-page-in-vue-js).
In the following source code, this line is necessary for some cases, even the same setting of Vue.js and Vue I18n. 

```js
vm.$forceUpdate(); // Some cases need it.
```

The case this line is necessary for my environment, which uses `*.prod.js` that was installed using npm. Perhaps, this might be in the specification. The full source code is the following.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Vue I18n Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="https://unpkg.com/vue-i18n@9"></script>
  </head>
  <body>
    <div id="yokan">
      <span> {{ $t("message.hello") }} </span>
    </div>
    <select name="lang" class="legal-item" id="select-lang">
      <option value="en">English</option>
      <option value="ja">Japanese</option>
    </select>
  </body>
  <script>
    /**
     * Get the language setting in your browser.
     */
    const langBrowser = navigator.language.split("-")[0];
    if (langBrowser === "en" || langBrowser === "ja")
      document.getElementById("select-lang").value = langBrowser;
    else document.getElementById("select-lang").value = "en";
    console.log("The language setting in your browser is " + langBrowser + ".");

    const messages = {
      en: {
        message: {
          hello: "Hi!",
        },
      },
      ja: {
        message: {
          hello: "やあ！",
        },
      },
    };

    const i18n = VueI18n.createI18n({
      locale: langBrowser,
      fallbackLocale: "en",
      messages,
    });

    const app = Vue.createApp({});
    app.use(i18n);
    const vm = app.mount("#yokan");

    /**
     * The event handler of <select>
     */
    document.getElementById("select-lang").addEventListener("change", () => {
      vm.$i18n.locale = document.getElementById("select-lang").value;
      vm.$forceUpdate(); // Some cases need it.
      console.log(
        "You change the language setting to " +
          document.getElementById("select-lang").value +
          "."
      );
    });
  </script>
</html>
```

The result is this.

![addEventListener](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fol16rbc7a6rrrw3mfx5.gif)

# Notice
This article was translated from the following article, which is written in Japanese.
{% embed https://zenn.dev/akira_kashihara/articles/6a4c34f47ed980 %}