vue-i18n

import { createApp, ref } from 'vue' import { createI18n, useI18n } from 'vue-i18n' // Root Vue app component (e.g., App.vue) const App = { template: ` <div> <h1>{{ t('greeting', { name: 'World' }) }}</h1> <p>{{ t('welcome') }}</p> <p>{{ t('pluralExample', { count: messageCount }) }}</p> <p>{{ t('dynamicMessage', { type: 'dynamic' }) }}</p> <button @click="changeLocale('en')">English</button> <button @click="changeLocale('fr')">Français</button> </div> `, setup() { // Use the Composition API hook const { t, locale } = useI18n({ useScope: 'global' }) // 'global' scope is necessary for root app messages const messageCount = ref(1) const changeLocale = (lang: string) => { locale.value = lang // Reactively change the current locale messageCount.value = lang === 'en' ? 5 : 1 // Example for pluralization demo } return { t, messageCount, changeLocale } } } // Locale messages definitions const messages = { en: { greeting: 'Hello, {name}!', welcome: 'Welcome to our site.', pluralExample: 'You have {count} message | You have {count} messages.', dynamicMessage: 'This is a {type} message.' }, fr: { greeting: 'Bonjour, {name} !', welcome: 'Bienvenue sur notre site.', pluralExample: 'Vous avez {count} message | Vous avez {count} messages.', dynamicMessage: 'Ceci est un message {type}.' } } // Create the i18n instance const i18n = createI18n({ legacy: false, // Essential for using Composition API with Vue I18n v9+ locale: 'en', // Default locale fallbackLocale: 'en', // Fallback locale if a message is not found messages // Provide all locale messages }) // Create the Vue app instance const app = createApp(App) // Install the i18n plugin app.use(i18n) // Mount the app to a DOM element app.mount('#app')