How to perform multi-language processing in Vue

Multilingual processing in Vue

When developing multilingual web applications, handling text translation and internationalization is an important task. Vue.js provides multiple ways to implement multilingualism to ensure that your application can support users in different languages. This article takes a deep dive into multilingual processing in Vue and provides sample code to help you implement it.

Choose a multilingual library

Before you start, you need to choose a multilingual library that is suitable for your project. Here are some popular Vue multi-language libraries:

1. vue-i18n : The officially maintained Vue.js internationalization plug-in provides powerful multi-language support.

2. vuex-i18n : Vuex-based plugin that stores multi-language state in Vuex.

3. vue-multilanguage : lightweight multilanguage library, easy to use and integrate.

In this article, we will use vue-i18nas an example to do multilingual processing.

Install and configure vue-i18n

First, you need to install and configure it vue-i18n. Install using the following command:

npm install vue-i18n

You can then configure it in your Vue application vue-i18n. In the file in your Vue application main.js, add the following code:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App.vue'

Vue.use(VueI18n)

const i18n = new VueI18n({
    
    
  locale: 'en', // 默认语言
  messages: {
    
    
    en: require('./locales/en.json'), // 英语
    es: require('./locales/es.json') // 西班牙语
  }
})

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

In the above code, we first import vue-i18nthe library and add it to Vue. We then create a new VueI18ninstance and configure the default language and message objects. The message object contains translated text in various languages, and we need to create a corresponding JSON file for each language.

Create multilingual translation files

Create a JSON file for each supported language containing the text that needs to be translated. For example, create a en.jsonfile and a es.jsonfile:

en.json :

{
    
    
  "hello": "Hello!",
  "welcome": "Welcome to our website."
}

es.json :

{
    
    
  "hello": "¡Hola!",
  "welcome": "Bienvenido a nuestro sitio web."
}

In these JSON files, we define some common translation texts. You can add more text items based on your application needs.

Using multiple languages ​​in Vue components

Now you can use methods in your Vue component this.$tto access the translated text. Here's a simple example:

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

<script>
export default {
  mounted() {
    console.log(this.$t('hello')); // 访问翻译文本
  }
}
</script>

In the above example, we use a method in the template $tto render the translated text. In mountedthe lifecycle hook, we also demonstrate how to access the translated text in JavaScript code.

switch language

To allow the user to switch the language of your application, you can use the vue-i18nprovided this.$i18n.localeproperty to set the current language. Here is an example:

<template>
  <div>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('es')">Español</button>
    <h1>{
   
   { $t('hello') }}</h1>
    <p>{
   
   { $t('welcome') }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang; // 切换语言
    }
  }
}
</script>

In the example above, we created two buttons, one each switching to English and Spanish. By clicking a button, the user can switch the current language of the application.

Dynamically load language files

Sometimes, you may want to load language files dynamically instead of loading all languages ​​on initialization. vue-i18nSupports dynamic loading, allowing you to load language files as needed. Here is an example:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App.vue'

Vue.use(VueI18n)

const i18n = new VueI18n({
    
    
  locale: 'en',
  messages: {
    
    
    en: require('./locales/en.json')
  }
})

// 动态加载西班牙语
import('./locales/es.json').then(messages => {
    
    
  i18n.setLocaleMessage('es', messages.default)
})

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

In the above code, we first load the English message, and then use importthe statement to dynamically load the Spanish message and add it to vue-i18nthe message.

Summarize

Vue.js provides powerful multilingual capabilities, allowing you to easily internationalize your applications. By choosing an appropriate multilingual library (such as Vue vue-i18n), creating translation files, using methods in Vue components, $tand switching languages, you can provide a great user experience to users of different languages. I hope the sample code provided in this article will help you implement multi-language processing in your Vue project. If you have any questions or need to

For step-by-step help, please feel free to ask us questions.