Laravel + Vuetify configure vue-i18n to support internationalization

Laravel integrates Vuetify, vue-i18n

Preface

I think Vuetify is the best-looking Vue.js UI framework, but the Vuetify development documents are basically in English. It is difficult to understand if the English level is not enough. Coupled with the reasons for the domestic wall, it is difficult to find the cause through Google. Below, the Element-UI community is very active in China, but the value is justice [/manual funny], Vuetify is most like Bootstrap, very good-looking in response and animation effects, decided to try the water, step on the pit, and finally integrate successfully. Now, share the project structure.

Internationalization

Before this, Laravel and Vue have been initialized, and the directory structure is shown in the figure:
Insert picture description here

Install Vuetify

npm install --save vuetify

Install fonts and icons

npm install material-design-icons-iconfont -D
npm install @mdi/font -D

app.js introduces and uses Vuetify

// 引入vuetify
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify);

new Vue({
    
    
    //定义Vue绑定的根元素
    el: '#app',
    router,
    store,
    //初始化Vuetify
    vuetify: new Vuetify()
}).$mount('#app'); //将这个实例挂载到 id=app 的根元素上

Install vue-i18n

npm install vue-i18n

Use vue-i18n

New plugin directory

mkdir -p resources/js/plugins/
# 新建 vue-i18n 插件
touch resources/js/plugins/vue-i18n.js

Edit vue-i18n.js, export i18n module

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n);
//定义标识符
const i18n = new VueI18n({
    
    
    locale: 'en-US',    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
    
    
        'zh-CN': require('../common/lang/cn'),   // 中文语言包
        'en-US': require('../common/lang/en')    // 英文语言包
    }
});
export {
    
    i18n}

New language pack directory

mkdir -p resources/js/common/lang
touch resources/js/common/lang/en.js
touch resources/js/common/lang/cn.js

Edit language pack

resources/js/common/lang/cn.js

export const m ={
    
    
    hello: '你好'
};

resources / js / common / lang / en.js

export const m ={
    
    
    hello: 'hello'
};

app.js introduces and uses vue-i18n, the final configuration is as follows

import Vue from 'vue';
import router from './routes.js'
import store from './store.js'
// 引入vuetify
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'
import  {
    
    i18n} from  './plugins/vue-i18n'

Vue.use(Vuetify);

new Vue({
    
    
    //定义Vue绑定的根元素
    el: '#app',
    //将上面声明的路由器传递到根Vue实例
    router,
    store,
    i18n,
    //初始化Vuetify
    vuetify: new Vuetify()
}).$mount('#app'); //将这个实例挂载到id=app的根元素上

Use vue-i18n in the template

English language display:

<template v-slot:activator="{ on }">
	{
    
    $t('m.hello')}}
</template>

Insert picture description here Convert to Chinese display:

Bind a changeLang method to the first button element in the upper right corner:

 <v-btn icon
	@click="changeLang"
>
	<v-icon>mdi-apps</v-icon>
</v-btn>

Added changeLang method:

methods:{
    
    
	changeLang(){
    
    
		this.$i18n.locale = 'zh-CN'
	}
}

npm run dev, refresh the page and display'hello', and after clicking on the element we bound,'hello' becomes'hello'
Insert picture description here