The whole process of realizing website internationalization using Vite2 and Vue3

Preface

Recently, some people have been complaining about a lot of problems that occurred after using Vue3 in their projects, and it was difficult to fill the gaps. Some people even discovered during development that some third-party libraries did not launch Vue3 versions. Therefore, they complained a lot and strongly recommended not to use Vue3.

Doing a good job of technical preliminary research and compatibility investigation is one of the tasks before development, especially for new technologies or major version updates. Unless you are very brave, do not use them in formal projects without sufficient preliminary research.

Recently, I have been connecting one of my Vue3 projects to international configuration. The overall process is not much different from Vue2. I would like to share my technical experience here.

Install vue-i18n

npm i vue-i18n --save

Vue-i18n is used here to implement internationalization and multi-language switching. The name i18n is actually composed of the first and last letters of the English word internationalization and the number 18 in the middle, which means "internationalization".

Configuring Locales

Create a new locales folder in the project src, and create a new language folder in it to store text configurations for each language. Create en and zh-CN folders in language, and create index.js accordingly, filling in the following content:

// src/locales/language/zh_CN/index.js

export default {

    title: "Chinese title",

}

// src/locales/language/en/index.js

export default {

    title: "English title",

}

Implementing getLangs.js

Create a new getLangs.js file in locales to get the language package in the language folder and expose it.
The lodash-es plugin is used here, you need to install it:

npm i lodash-es --save

The specific code is as follows:

import { set } from 'lodash-es'

const modules = import.meta.globEager('./language/**/*.js')

function getLanguages(langs, prefix = 'lang') {

  const obj = {}

  Object.keys(langs).forEach((key) => {

    const mod = langs[key].default

    let k = key.replace(`./${prefix}/`, '').replace(/^\.\//, '')

    const lastIndex = k.lastIndexOf('.')

    k = k.substring(0, lastIndex)

    const keyList = k.split('/')

    const lang = keyList.shift()

    const objKey = keyList.join('.')

    if (lang) {

      set(obj, lang, obj[lang] || {})

      set(obj[lang], objKey, mod)

    }

  })

  return obj

}

const { language } = getLanguages(modules)

export default language

Creating an i18n instance

Next, you need to create an i18n instance and mount it to Vue. Create a new i18n.js in locales. The code is as follows:

import { createI18n } from 'vue-i18n'

import messages from './getLangs'

export default createI18n({

  legacy: false,

  locale: window.localStorage.getItem("lang") || 'zh_CN',

  messages,

})

You can see that the default language configuration here is obtained from the localStorage in the browser, and if there is no localStorage, it is "zh-CN". After switching languages, the current language needs to be saved, otherwise when the user refreshes, it will return to the default language configuration.
Import in main.js:

import i18n from './locales/i18n'

const app = createApp(App)

app.use(I18n).mount("#app")

Use in template

Here, the composition API is used to introduce and use it. In the corresponding position of the template, the t function is used to obtain the display text under the current language configuration. The function receives the path of the language configuration file and the attribute, and connects them through dot syntax. If it cannot be found, the entire function name will be displayed in character form.

<template>

<p>{{t(`index.title`)}}</p>

</template>

import { useI18n } from "vue-i18n";

export default {

    setup() {

        const { t } = useI18n();

        return { t }

    }

}

Language Switching

There are two common ways to switch languages. One is to put the current language configuration on the URL. When the language is switched, the page will jump to the corresponding route and then display the corresponding text in the current language.

The second is a switch without refresh/jump, which stores the current language in the local cache and switches the language by modifying the locale value of vue-i18n.
The second method is recommended here. Switching languages ​​does not require refreshing the page or jumping.

<template>

  <a

    href="javascript:;"

    @click="setLocals(locale === 'zh_CN' ? 'en' : 'zh_CN')"

  >

    {{ locale === 'zh_CN' ? '英' : '中' }}

  </a>

</template>

<script>

import { useI18n } from "vue-i18n";

import { ref } from "@vue/reactivity";

export default {

setup() {

    const { t, locale } = useI18n();

    const getLocals = () => window.localStorage.getItem("lang") || locale.value;

    const currentLocale = ref(getLocals());

    const setLocals = (lang = "") => {

      locale.value = lang;

      window.localStorage.setItem("lang", lang);

    };

    if (!window.localStorage.getItem("lang")) {

      setLocals(currentLocale.value);

    } else {

      if (currentLocale.value !== locale.value) {

        setLocals(currentLocale.value);

      }

    }

    return {

      t,

      locale,

      setLocals,

    };

  },

};
</script>

During initialization, first get the current language from the local, if not get the default language configuration, when switching languages, not only need to modify the locale value, but also need to save a copy of the current language to the local cache.

About the need to refresh after switching to take effect

In the above example, the text rendered directly using the t function in the template can update the view language without refreshing when the language is switched. However, if the t function is used directly in the setup, it will not be updated immediately and will take effect after a refresh.

It is not recommended to use the t function outside of templates. If necessary, you can define multilingual text in the component and access it in the template in the form of key-value pairs.

Switching languages ​​triggers updates of other components

In some scenarios, the text displayed on the page is obtained externally and cannot be updated directly by language switching. It is necessary to implement a broadcast effect similar to that of sibling components.

In Vue3, the use of global bugs has been cancelled, and plug-ins such as mitt can be used instead.

Summarize

This is the end of this article about using Vite2 and Vue3 to achieve website internationalization. For more relevant Vite2 and Vue3 website internationalization content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!