vue-i18n-composable
Version:
Composition API for vue-i18n in Vue 2.x
132 lines (101 loc) • 2.06 kB
Markdown
for `vue-i18n` in Vue 2.x
<a href="https://www.npmjs.com/package/vue-i18n-composable">
<img alt="npm" src="https://img.shields.io/npm/v/vue-i18n-composable">
</a>
- `vue-i18n-composable@v1`: `>=2.5 <=2.6`
- `vue-i18n-composable@v2`: `>=2.7 <3`
```sh
npm i vue-i18n vue-i18n-composable
```
if you use Vue 2.5 - Vue 2.6, you need to install `@vue/composition-api`
```sh
npm i @vue/composition-api
```
```js
// main.js
import Vue from 'vue'
import { createI18n } from 'vue-i18n-composable'
import App from './App.vue'
const i18n = createI18n({
locale: 'ja',
messages: {
en: {
language: 'English',
},
ja: {
language: '日本語',
},
},
})
const app = new Vue({
render: h => h(App),
i18n,
})
app.mount('#app')
```
In components:
```vue
<template>
<div>{{ t('language') }}</div>
</template>
<script>
import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n-composable'
export default defineComponent({
setup() {
return {
...useI18n()
}
}
})
</script>
```
```js
// main.js
import Vue from 'vue'
import VueCompositionAPI, { createApp } from '@vue/composition-api'
import { createI18n } from 'vue-i18n-composable'
import App from './App.vue'
Vue.use(VueCompositionAPI)
const i18n = createI18n({
locale: 'ja',
messages: {
en: {
language: 'English',
},
ja: {
language: '日本語',
},
},
})
const app = createApp({
render: h => h(App),
i18n,
})
app.mount('#app')
```
In components:
```vue
<template>
<div>{{ t('language') }}</div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useI18n } from 'vue-i18n-composable'
export default defineComponent({
setup() {
return {
...useI18n()
}
}
})
</script>
```
[ ](https://github.com/intlify/vue-i18n-composable/blob/master/LICENSE) © 2020 [Anthony Fu](https://github.com/antfu)
Composition API