vue-i18n-bridge

import Vue from 'vue'; import VueCompositionAPI from '@vue/composition-api'; import { createI18n, useI18n } from 'vue-i18n-bridge'; // Import from vue-i18n-bridge import App from './App.vue'; // 1. Install Composition API for Vue 2 Vue.use(VueCompositionAPI); // 2. Install vue-i18n (v8.x) with the bridge option // Note: `vue-i18n-bridge` must also be installed via npm/yarn/pnpm // For Vue 2.6, VueI18n constructor from 'vue-i18n' (v8) is passed as a second argument // For Vue 2.7, this step might be slightly different with `vue-demi` import VueI18n from 'vue-i18n'; // Legacy vue-i18n v8 Vue.use(VueI18n as any, { bridge: true }); // Important: tell v8.x to enable bridge mode const messages = { en: { hello: 'Hello Vue 2 with i18n v9 features!', greeting: 'Welcome, {name}!' }, es: { hello: '¡Hola Vue 2 con características de i18n v9!', greeting: '¡Bienvenido, {name}!' } }; // 3. Create the i18n instance using createI18n from vue-i18n-bridge const i18n = createI18n({ legacy: false, // Essential for using Composition API mode and vue-i18n@9 features locale: 'en', fallbackLocale: 'en', messages, }, VueI18n); // Pass the VueI18n v8 constructor as the second argument for Vue 2.6 // Inject i18n instance into Vue 2 app new Vue({ i18n: i18n as any, // Type assertion often needed due to bridge's compatibility layer render: h => h(App), }).$mount('#app'); // App.vue (example component using Composition API) // Ensure you have a template like <template>...</template> in App.vue /* <script lang="ts"> import { defineComponent, ref } from '@vue/composition-api'; import { useI18n } from 'vue-i18n-bridge'; // Use useI18n from the bridge export default defineComponent({ name: 'App', setup() { const { t, locale } = useI18n(); // Access translation functions const username = ref('Developer'); const switchLocale = (newLocale: string) => { locale.value = newLocale; }; return { t, locale, username, switchLocale, }; }, template: ` <div> <h1>{{ t('hello') }}</h1> <p>{{ t('greeting', { name: username }) }}</p> <p>Current Locale: {{ locale }}</p> <button @click="switchLocale('en')">English</button> <button @click="switchLocale('es')">Español</button> </div> ` }); </script> */