How to use Vue for internationalization and multi-language support

How to use Vue for internationalization and multi-language support

With the development of globalization, more and more websites and applications need to support multi-language to meet the needs of users in different regions. As a popular front-end framework, Vue provides a simple and flexible way to achieve internationalization and multi-language support. This article will introduce how to use internationalization in Vue and provide code examples.

1. Install vue-i18n
   First, we need to install the vue-i18n plug-in. Run the following command in the command line to install vue-i18n:

npm install vue-i18n --save

2. Create language files
   Create a lang directory under the src directory and create a languages.js file in it . The languages.js file is used to store translated text in different languages. For example, we can create a Chinese and English language file:

// src/lang/languages.js

const languages = {
  en: {
    welcome: 'Welcome to my website!',
    about: 'About',
    contact: 'Contact',
  },
  zh: {
    welcome: '欢迎来到我的网站！',
    about: '关于',
    contact: '联系',
  },
}

export default languages;

3. Create i18n instance
   In the main.js file, we need to create an i18n instance and introduce languages. js file:

// main.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import languages from './lang/languages';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // 默认语言
  messages: languages,
});

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

In the above code, we first introduce the VueI18n plug-in and register it into Vue. Then, we created a VueI18n instance and specified the default language as English. Finally, we passed the i18n instance to the Vue instance and started the application.

4. Using translated text in components
   Now, we can use translated text in components. We can access the translation text through the $t method. For example, in a component, we can use the translated text like this:

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <ul>
      <li>{{ $t('about') }}</li>
      <li>{{ $t('contact') }}</li>
    </ul>
  </div>
</template>

In the above code, we use the $t method to get the translated text. The parameter of the $t method is the key of the translated text. In our example, 'welcome', 'about' and 'contact' are all keys for translating text.

5. Switch language
   Vue-i18n also provides a method to switch languages. We can switch languages ​​by calling the $locale method. For example, we can add a button to switch languages ​​in the component:

<template>
  <div>
    <button @click="switchLanguage('en')">English</button>
    <button @click="switchLanguage('zh')">中文</button>
  
    <h1>{{ $t('welcome') }}</h1>
    <ul>
      <li>{{ $t('about') }}</li>
      <li>{{ $t('contact') }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    switchLanguage(lang) {
      this.$i18n.locale = lang;
    },
  },
}
</script>

In the above code, we bind a click event to the two buttons. When the button is clicked, the switchLanguage method will be called. to switch languages.

So far, we have completed internationalization and multi-language support in Vue. Through the above steps, we can easily translate the Vue application into different languages ​​and provide language switching functionality. I hope this article can help you implement internationalization and multi-language support in your Vue project.

Code examples are in the official document link document: https://kazupon.github.io/vue-i18n/

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