Vue I18n Routing

1.2.0 · active · verified Sun Apr 19

vue-i18n-routing is a critical extension within the Intlify ecosystem, designed to seamlessly integrate internationalization capabilities (provided by `vue-i18n`) with client-side routing (provided by `vue-router`). It enhances `vue-router` by enabling locale-aware URL patterns, dynamic route parameter handling for locales, and helper functions for navigating between localized routes. The package is currently at version 1.2.0 and receives active maintenance, evidenced by recent bug fixes and feature additions. Its primary differentiator is providing a cohesive solution for managing multi-language URLs without boilerplate, supporting both Vue 2 (via `vue-i18n-bridge` and `@vue/composition-api`) and Vue 3 environments. It abstracts the complexity of locale prefixes and path resolution, making it easier to build SEO-friendly, internationalized Vue applications with consistent user experiences across different languages.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to set up a basic Vue 3 application with `vue-i18n` and `vue-i18n-routing`. It configures two locales (English and French), defines locale-prefixed routes, and shows how to use `useLocalePath` for navigation and `useSwitchLocalePath` to dynamically change the current route's locale. This setup is typical for creating internationalized Single Page Applications (SPAs) where the locale is managed via URL segments.

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');

view raw JSON →