i18next-vue

import { createApp, defineComponent } from 'vue'; import i18next from 'i18next'; import I18NextVue from 'i18next-vue'; import { useTranslation } from 'i18next-vue'; // 1. Initialize i18next (before mounting Vue app) i18next.init({ lng: 'en', fallbackLng: 'en', resources: { en: { translation: { 'welcome': 'Welcome to our app!', 'greeting': 'Hello, {{name}}!', 'dynamic_link': 'Visit the {{link}} page.', 'home': 'Home' } }, de: { translation: { 'welcome': 'Willkommen in unserer App!', 'greeting': 'Hallo, {{name}}!', 'dynamic_link': 'Besuchen Sie die {{link}} Seite.', 'home': 'Startseite' } } } }); // 2. Define your root Vue component const App = defineComponent({ setup() { const { i18next, t } = useTranslation(); const changeLanguage = (lang: string) => { i18next.changeLanguage(lang); }; return { i18next, t, changeLanguage }; }, template: ` <div> <h1>{{ t('welcome') }}</h1> <p>{{ t('greeting', { name: 'World' }) }}</p> <p>Current language: {{ i18next.language }}</p> <button @click="changeLanguage('en')">English</button> <button @click="changeLanguage('de')">Deutsch</button> <h2>Using $t in template:</h2> <p>{{ $t('greeting', { name: 'Vue User' }) }}</p> <h2>Using the <i18next> component for rich text:</h2> <i18next :translation="t('dynamic_link')"> <template #link> <a href="/home">{{ t('home') }}</a> </template> </i18next> </div> ` }); // 3. Create and mount the Vue app with the i18next-vue plugin const app = createApp(App); app.use(I18NextVue, { i18next }); app.mount('#app');