vue-i18n-routing

import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router'; import { createI18n } from 'vue-i18n'; import { createRouter as createI18nRouter, useLocalePath, useSwitchLocalePath } from 'vue-i18n-routing'; // --- i18n setup --- const messages = { en: { welcome: 'Welcome to our multi-language app!', about: 'About Us', home: 'Home', greeting: 'Hello from home!', switch_locale: 'Switch to {locale}' }, fr: { welcome: 'Bienvenue dans notre application multilingue !', about: 'À Propos', home: 'Accueil', greeting: 'Bonjour de l\'accueil !', switch_locale: 'Passer au {locale}' } }; const i18n = createI18n({ locale: 'en', fallbackLocale: 'en', messages, legacy: false, // Must be false for Composition API globalInjection: true }); // --- Vue Router setup --- const routes = [ { path: '/:locale', component: { template: '<router-view />' }, // A wrapper for localized routes children: [ { path: '', name: 'home', component: { template: ` <div> <h1>{{ $t('greeting') }}</h1> <router-link :to="localePath('about')">{{ $t('about') }}</router-link> <p> <button @click="switchLocale('fr')">{{ $t('switch_locale', { locale: 'fr' }) }}</button> <button @click="switchLocale('en')">{{ $t('switch_locale', { locale: 'en' }) }}</button> </p> </div> ` } }, { path: 'about', name: 'about', component: { template: ` <div> <h1>{{ $t('about') }}</h1> <p>{{ $t('welcome') }}</p> <router-link :to="localePath('home')">{{ $t('home') }}</router-link> </div> ` } } ] } ]; const router = createI18nRouter({ router: createRouter({ history: createWebHistory(), routes }), i18n, defaultLocale: 'en' // Specify default locale to omit from path }); // --- Vue App setup --- const app = createApp({ setup() { const localePath = useLocalePath(); const switchLocalePath = useSwitchLocalePath(); const switchLocale = (locale) => { router.push(switchLocalePath(locale)); }; return { localePath, switchLocale }; } }); app.use(i18n); app.use(router); app.mount('#app');