🔥️
vue-next-i18n
Lightweight internationalization plugin for Vue 3
🌈
Getting started
To begin, you'll need to install vue-next-i18n
use npm
npm install vue-next-i18n
use yarn
yarn add vue-next-i18n
🚀
Usage
When using with a module system, you must explicitly install the vue-next-i18n via app.use():
// 1. Ready translated locale messages
// The structure of the locale message is the hierarchical object structure with each locale as the top property
const messages = {
en: {
message: {
hello: 'hello world'
}
},
zhCHS: {
message: {
hello: '你好 世界'
}
},
ja: {
message: {
hello: 'こんにちは、世界'
}
}
}
// 2. Create i18n instance with options
import { createApp } from 'vue';
import { createI18n } from 'vue-next-i18n';
const i18n = createI18n({
locale: 'zhCHS', // set locale, depend on messages object structure keys
messages, // set locale messages
localeKeys:['zhCHS','zhCHT','en'] //Not required default: ['zhCHS','zhCHT','en']
})
// 3. Create a vue root instance
const app = createApp({
// set something options
// ...
})
// 4. Install i18n instance to make the whole app i18n-aware
app.use(i18n)
// 5. Mount
app.mount('#app')
// Now the app has started!
HTML
{{ $t("message.hello") }}
{{ $t("message.hello") }}
你好 世界
你好 世界
🚌
Composition API
import { useI18n } from 'vue-next-i18n'
export default {
setup() {
const i18n = useI18n()
const { currentLocale, changeLocale } = i18n
return {
currentLocale,
changeLocale
}
}
}
📦
Examples
basic
{{ $t("message.hello") }}
const messages = {
en: {
message: {
hello: 'hello world'
}
},
zhCHS: {
message: {
hello: '你好 世界'
}
},
ja: {
message: {
hello: 'こんにちは、世界'
}
}
}
{{ $t("message.hello") }}
support function translation
{{ $t("message.hello",'hahaha') }}
const messages = {
en: {
message: {
hello: (val) => `hello world ${val}`
}
},
zhCHS: {
message: {
hello: (val) => `你好 世界 ${val}`
}
},
ja: {
message: {
hello: (val) => `こんにちは、世界 ${val}`
}
}
}
{{ $t("message.hello",'hahaha') }}
use array messages
The array order depends on the localeKeys, default value is ['zhCHS','zhCHT','en']
{{ $t(['你好 世界','hello world','こんにちは、世界']) }}
// example localeKeys: ['zhCHS','en','ja']
{{ $t(['你好 世界','hello world','こんにちは、世界']) }}
use i18n option in component
{{ $t('message.hello') }}
export default {
i18n:{
en: {
message: {
hello: 'hello world'
}
},
zhCHS: {
message: {
hello: '你好 世界'
}
},
ja: {
message: {
hello: 'こんにちは、世界'
}
}
},
setup(){
// code...
}
}
{{ $t('message.hello') }}
📜
Changelog
Details changes for each release are documented in the CHANGELOG.md.
📄
License
MIT License © 2022 Aaron Lam