DEV Community

Akira Kashihara
Akira Kashihara

Posted on

How to make internationalization your website on Vue@3 and Vue-i18n@9

What this article shows you

  • I18n (Internationalization) 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

I18n according to language setting in the browser

This source code was implemented based on Vue I18n official Guide and Issues on its Github repository.

<!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>
Enter fullscreen mode Exit fullscreen mode

The result is the following.

The result i18n according to browser setting

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 and two-way binding in Vue.js.

<!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>
Enter fullscreen mode Exit fullscreen mode

The result is the following.

Two-way binding implementation

Using addEventListener (Javascript)

The source code in this section was written based on Vue I18n official Guide and the question in stack overflow.
In the following source code, this line is necessary for some cases, even the same setting of Vue.js and Vue I18n.

vm.$forceUpdate(); // Some cases need it.
Enter fullscreen mode Exit fullscreen mode

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.

<!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>
Enter fullscreen mode Exit fullscreen mode

The result is this.

addEventListener

Notice

This article was translated from the following article, which is written in Japanese.

Top comments (0)