How to use Vue and Element-UI for multi-language support

How to use Vue and Element-UI for multi-language support

Introduction:
With the process of globalization, more and more applications need to support multiple languages. Vue, as a popular JavaScript framework, provides a convenient way to achieve multi-language support. Element-UI, as a set of UI component libraries based on Vue, also provides multi-language support. This article will introduce how to use Vue and Element-UI to achieve multi-language support and provide relevant code examples.

1. Preparation
Before we start, we need to ensure that the following conditions are met:

1. Install Node.js and npm (if you have not installed it yet).
2. Create a new Vue project, you can use Vue CLI or other methods.

2. Install dependencies
First, we need to install the two dependencies Element-UI and vue-i18n.

Run the following command in the project root directory:
npm install element-ui vue-i18n

3. Configure multi-language

1. Create a To store the language configuration folder, create a lang folder in the src directory and add a langs.js file in it. This file is used to define translation text in different languages.

The sample code is as follows:

// langs.js
export default {
  en: {
    welcome: 'Welcome',
    greeting: 'Hello, {name}!'
  },
  zh: {
    welcome: '欢迎',
    greeting: '你好，{name}！'
  }
};

2. Create a plugins folder in the src directory and add an i18n.js file in it. This file is used to create and configure a Vue-i18n instance.

The sample code is as follows:

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

Vue.use(VueI18n);

const messages = {
  en: langs.en,
  zh: langs.zh
};

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

export default i18n;

4. Using multiple languages

1. Import the Vue-i18n instance in the main.js file and hang it Loaded into the Vue instance.

The sample code is as follows:

// main.js
import Vue from 'vue';
import App from './App.vue';
import i18n from './plugins/i18n';

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

2. In components that require multi-language support, use the $t method of Vue-i18n to access the translated text.

The sample code is as follows:

<!-- MyComponent.vue -->
<template>
  <div>
    <h1 id="t-welcome">{{ $t('welcome') }}</h1>
    <p>{{ $t('greeting', { name: 'John' }) }}</p>
  </div>
</template>

5. Multi-language support using Element-UI
Element-UI has integrated support for multi-language, we only need to do a little work Just configure it.

1. Import the Element-UI style and multi-language configuration in the main.js file.

The sample code is as follows:

// main.js
import Vue from 'vue';
import App from './App.vue';
import i18n from './plugins/i18n';
import 'element-ui/lib/theme-chalk/index.css';
import locale from 'element-ui/lib/locale/lang/en'; // 根据需要选择语言

Vue.use(ElementUI, { locale });

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

2. In Element-UI components that require multi-language support, you can use it directly.

The sample code is as follows:

<!-- MyComponent.vue -->
<template>
  <el-button>{{ $t('welcome') }}</el-button>
</template>

6. Switching language
Finally, we can add a language switching function to allow users to switch languages ​​flexibly.

The sample code is as follows:

<!-- LanguageSwitcher.vue -->
<template>
  <div>
    <select v-model="language" @change="changeLanguage">
      <option value="en">English</option>
      <option value="zh">中文</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      language: 'en'
    };
  },
  methods: {
    changeLanguage() {
      this.$i18n.locale = this.language;
    }
  }
};
</script>

Finally, introduce the LanguageSwitcher component where you need to switch languages.

Summary:
Through the above steps, we can achieve multi-language support for Vue and Element-UI. First, we need to install dependencies and configure multilingual text. We can then use Vue-i18n in the component to access the translated text. Finally, Element-UI has integrated multi-language support, and we only need to perform simple configuration.

I hope this article is helpful to you, and I wish you happy programming with multi-language support using Vue and Element-UI!

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