Composition API for vue-i18n in Vue 2.x
vue-i18n-composable@v1:>=2.5 <=2.6vue-i18n-composable@v2:>=2.7 <3
npm i vue-i18n vue-i18n-composableif you use Vue 2.5 - Vue 2.6, you need to install @vue/composition-api
npm i @vue/composition-api// 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>// 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>MIT License © 2020 Anthony Fu