# i18n-vue3-plugin

**Repository Path**: qianyuanjia/i18n-vue3-plugin

## Basic Information

- **Project Name**: i18n-vue3-plugin
- **Description**: 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
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-05-07
- **Last Updated**: 2024-05-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Install
```shell
npm install --save i18n-vue3-plugin
```

# Basic Use
可以直接传入语言环境对象
```js
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快捷扫描语言文件夹
```js
createApp(App).use(i18nVue3Plugin, {
    lang:'en',
    lazy:false,
    modules:import.meta.glob('./langs/**/*',{eager:true})
}).mount('#app')
```
webpack可以借助require.context
```js
createApp(App).use(i18nVue3Plugin, {
    lang:'en',
    lazy:false,
    modules:require.context('./langs',true)
}).mount('#app')
```

# Asynchronous loading of language files
可以同步加载语言文件
vite 工程下可以借助import.meta.glob异步加载语言文件夹
```js
createApp(App).use(i18nVue3Plugin, {
    lang:'en',
    lazy:true,
    modules:import.meta.glob('./langs/**/*')
}).mount('#app')
```
其他环境可以如下使用
```js
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文件夹内容

```js
-- langs
    -- en
        -- home.(json | js | ts)
        -- about.(json | js | ts)
    -- zh
        -- home.(json | js | ts)
        -- about.(json | js | ts)
    ...other languages
```

可以查看[仓库](https://gitee.com/qianyuanjia/i18n-vue3-plugin)源码

# Vue中使用方式

模板中使用
```html
    <p>{{$i18n.translate('home.edit')}}</p>
    <p>{{ $i18n.translate('index.hello',{name:'李强'}) }}</p>
```
切换语言
```js
import {useI18N} from 'i18n-vue3-plugin';
const $i18n = useI18N();
const changeLang=()=>{
  $i18n.changeLang($i18n.getLang()==='zh'?'en':'zh')
}
```

# 支持派生ref
```js
import {useI18N} from 'i18n-vue3-plugin';
const $i18n = useI18N();
const status=$i18n.translateRef('home.edit')
```

# 自定义扩展
可以直接拷贝[仓库](https://gitee.com/qianyuanjia/i18n-vue3-plugin) i18n文件夹源码自行扩展。