Awesome

vue-i18n-composable

Composition API for vue-i18n in Vue 2.x

Support Vue version

• vue-i18n-composable@v1: >=2.5 <=2.6
• vue-i18n-composable@v2: >=2.7 <3

Install

npm i vue-i18n vue-i18n-composable

if you use Vue 2.5 - Vue 2.6, you need to install @vue/composition-api

npm i @vue/composition-api

Usage

For Vue 2.7

// main.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { createI18n } from 'vue-i18n-composable'
import App from './App.vue'

Vue.use(VueI18n)

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:

<template>
  <div>{{ t('language') }}</div>
</template>

<script>
import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n-composable'

export default defineComponent({
  setup() {
    return {
      ...useI18n()
    }
  }
})
</script>

For Vue 2.5 - Vue 2.6

// main.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import VueCompositionAPI, { createApp } from '@vue/composition-api'
import { createI18n } from 'vue-i18n-composable'
import App from './App.vue'

Vue.use(VueCompositionAPI)
Vue.use(VueI18n)

const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      language: 'English',
    },
    ja: {
      language: '日本語',
    },
  },
})

const app = createApp({
  render: h => h(App),
  i18n,
})

app.mount('#app')

In components:

<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>

📄 License

MIT License © 2020 Anthony Fu