i18n-vue3-plugin
v1.0.4
Published
This is a Vue 3 plugin that boasts its capability to load language files synchronously or asynchronously. Additionally, it offers support for template replacement, enhancing its versatility and appeal.
Downloads
13
Maintainers
Readme
Install
npm install --save i18n-vue3-plugin
Basic Use
可以直接传入语言环境对象
import { createApp } from 'vue'
import App from './App.vue'
import {i18nVue3Plugin} from 'i18n-vue3-plugin';
createApp(App).use(i18nVue3Plugin, {
locale:{
zh:{
home:{
edit:'编辑'
},
hello:'你好, { name }',
test:'测试'
},
en:{
home:{
edit:'edit'
},
hello:'hello, {name}',
test:'test'
}
},
lang:'en'
}).mount('#app')
Synchronous loading of language files
可以同步加载语言文件 vite 工程下可以借助import.meta.glob快捷扫描语言文件夹
createApp(App).use(i18nVue3Plugin, {
lang:'en',
lazy:false,
modules:import.meta.glob('./langs/**/*',{eager:true})
}).mount('#app')
webpack可以借助require.context
createApp(App).use(i18nVue3Plugin, {
lang:'en',
lazy:false,
modules:require.context('./langs',true)
}).mount('#app')
Asynchronous loading of language files
可以同步加载语言文件 vite 工程下可以借助import.meta.glob异步加载语言文件夹
createApp(App).use(i18nVue3Plugin, {
lang:'en',
lazy:true,
modules:import.meta.glob('./langs/**/*')
}).mount('#app')
其他环境可以如下使用
createApp(App).use(i18nVue3Plugin, {
lang:'en',
lazy:true,
modules:{
'./langs/en/index.js':()=>import('./langs/en/index.js'),
'./langs/en/home.js':()=>import('./langs/en/home.js')
...
}
}).mount('#app')
langs文件夹内容
-- langs
-- en
-- home.(json | js | ts)
-- about.(json | js | ts)
-- zh
-- home.(json | js | ts)
-- about.(json | js | ts)
...other languages
可以查看仓库源码
Vue中使用方式
模板中使用
<p>{{$i18n.translate('home.edit')}}</p>
<p>{{ $i18n.translate('index.hello',{name:'李强'}) }}</p>
切换语言
import {useI18N} from 'i18n-vue3-plugin';
const $i18n = useI18N();
const changeLang=()=>{
$i18n.changeLang($i18n.getLang()==='zh'?'en':'zh')
}
支持派生ref
import {useI18N} from 'i18n-vue3-plugin';
const $i18n = useI18N();
const status=$i18n.translateRef('home.edit')
自定义扩展
可以直接拷贝仓库 i18n文件夹源码自行扩展。