How to handle multi-language and internationalization in Vue

How to deal with multi-language and internationalization in Vue

In today's global environment, in order to better serve global users, multi-language and internationalization have become The basic needs of a website or application. As a popular front-end framework, Vue provides simple and powerful tools to help us deal with multi-language and internationalization.

1. Preparation
Before we start, we need to install Vue and its related plug-ins. First make sure you have Node.js and npm installed. Run the following command on the command line to install Vue CLI (command line tool):

npm install -g @vue/cli

Next, create a new Vue project using Vue CLI:

vue create my-app

Select the configuration according to the prompts. You can choose the default configuration. After the project is created, enter the project folder:

cd my-app

Install the vue-i18n plug-in, which is an international plug-in officially recommended by Vue:

npm install vue-i18n

After the installation is completed, We can start dealing with multilingualism and internationalization.

2. Create a language file
Create a locales folder under the src folder, and create a en.json## in it #And a zh.json file. These two files are used to store English and Chinese translation texts respectively.

en.json example:

{
  "hello": "Hello",
  "welcome": "Welcome to my app"
}

zh.json example:

{
  "hello": "你好",
  "welcome": "欢迎来到我的应用"
}

3. Configure Vue-i18n

in the
src folder Create a i18n folder and create an index.js file inside it.

The code in index.js is as follows:

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
  en: require('./locales/en.json'),
  zh: require('./locales/zh.json')
}

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages
})

export default i18n

We first import Vue and VueI18n, and use the Vue.use() method to install the VueI18n plug-in.

Next, we define a

messages object that contains English and Chinese translated text.

Then, we create a VueI18n instance and set the default language and fallback language by specifying the

locale and fallbackLocale properties. Finally, pass the messages object as a parameter to the constructor of VueI18n.

Finally, we export the i18n instance for use in the Vue component.

4. Using multiple languages

It is very simple to use multiple languages ​​in Vue components. Just use the
$t() method in the text that needs to be translated, and pass in the corresponding key name.

The sample code is as follows:

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('welcome') }}</p>
  </div>
</template>

In the above example,

$t('hello') and $t('welcome') will Automatically translate into corresponding text according to the current language environment.

5. Switch language

In addition to automatically translating text according to the locale, Vue-i18n also provides methods to switch languages.

The sample code is as follows:

<template>
  <div>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('zh')">中文</button>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('welcome') }}</p>
  </div>
</template>

<script>
import i18n from '@/i18n'

export default {
  methods: {
    changeLanguage(lang) {
      i18n.locale = lang
    }
  }
}
</script>

In the above example, we bound the

changeLanguage method to the button to switch the language, and passed in different parameters to changei18nThe locale of the instance.

6. Summary

By using the Vue-i18n plug-in, handling multi-language and internationalization becomes very simple. We only need to prepare the language file, configure Vue-i18n, and then use the
$t() method in the text that needs to be translated.

I hope this article can help you quickly get started with multi-language and internationalization issues in Vue.

The above is the detailed content of How to handle multi-language and internationalization in Vue. For more information, please follow other related articles on the PHP Chinese website!