How to use Vue for internationalization and multi-language switching

How to use Vue for internationalization and multi-language switching

Introduction:
With the development of globalization, many websites or applications require support for multiple languages ​​to meet the needs of different users. In the Vue framework, we can easily implement internationalization and multi-language switching. This article will introduce how to use the Vue-i18n plug-in to implement internationalization and multi-language switching, and give corresponding code examples.

1. Install and configure Vue-i18n
First, we need to install the Vue-i18n plug-in. Execute the following command in the root directory of the project:

npm install vue-i18n --save

After the installation is complete, introduce Vue-i18n in the main.js file and configure it.

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en', //默认语言为英文
  messages: {
    'en': require('./locales/en.json'), //英文语言包
    'zh': require('./locales/zh.json') //中文语言包
  }
})

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

In the above code, we first introduce the Vue-i18n plug-in and use it through the Vue.use() method.
Next, an instance of VueI18n was created and configured. Among them, the locale attribute specifies the default language as English, and the messages attribute contains language packs for different languages.
Finally, by passing the i18n object to the i18n option of the Vue instance, the entire application can access the i18n object.

2. Create language pack files
In the code of the previous step, we introduced two language pack files: en.json and zh.json. Used to store English and Chinese translation texts respectively.
We create a locales folder and create en.json and zh.json files under this folder. The content is as follows:

en.json:

{
  "home": "Home",
  "about": "About",
  "contact": "Contact"
}

zh.json:

{
  "home": "首页",
  "about": "关于我们",
  "contact": "联系我们"
}

The above content defines the three terms "home", "about" and "contact" respectively. The corresponding translation text of each translation item.

3. Use translated text in the component
In the Vue component, we can obtain the corresponding translated text through the this.$t() method.

<template>
  <div>
    <h1>{{ $t('home') }}</h1>
    <p>{{ $t('about') }}</p>
    <a>{{ $t('contact') }}</a>
  </div>
</template>

In the above code, the translated text corresponding to "home" is obtained through {{ $t('home') }} and rendered as the title of the page. Similarly, we can also use {{ $t('about') }} and {{ $t('contact') }} to get the translated text of other translation items and render it into the page.

4. Switch language
The Vue-i18n plug-in also provides an auxiliary function this.$i18n.locale for obtaining and setting the current locale. By changing the value of locale, we can achieve multi-language switching.

<template>
  <div>
    <select v-model="$i18n.locale">
      <option value="en">English</option>
      <option value="zh">中文</option>
    </select>
  </div>
</template>

The above code creates a drop-down list where the user can change the current locale by selecting different options. Associate the drop-down list with this.$i18n.locale through the v-model directive to achieve two-way binding.

Summary:
This article introduces how to use the Vue-i18n plug-in to achieve internationalization and multi-language switching. First, we installed and configured the Vue-i18n plugin. Next, the language pack file is created and the this.$t method is used in the component to obtain the translated text. Finally, by using this.$i18n.locale to switch languages, the multi-language switching function is implemented. I hope this article will be helpful to everyone in implementing internationalization and multi-language switching in Vue projects.

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