i18n

Nuxt typed router has out of the box support for @nuxtjs/i18n

To try it

yarn
yarn add @nuxtjs/i18n@next
pnpm
pnpm install @nuxtjs/i18n@next
npm
npm install @nuxtjs/i18n@next
nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'nuxt-typed-router',
    '@nuxtjs/i18n'
  ],
  i18n: // your i18n config
})

You will have autocomplete for

  • Only the default routes when using prefix(*) strategies.
  • The registered locales

useLocalePath()

Global types for useLocalePath will be overwritten, and the function is also exported from @typed-router.

const localePath = useLocalePath();

navigateTo(localePath({ name: 'user-id'}, 'fr')); // Error ❌
navigateTo(localePath({ name: 'user-id', params: {id: 1}}, 'fr')); // Good ✅

useLocaleRoute()

Global types for useLocaleRoute will be overwritten, and the function is also exported from @typed-router.

const localeRoute = useLocaleRoute();

const route = localeRoute({ name: 'user-id', }, 'fr'); // Error ❌
const route = localeRoute({ name: 'user-id', params: {id: 1} } , 'fr'); // Good ✅
if (route) {
  navigateTo(route.fullPath);
}

NuxtLinkLocale

The component provived by @nuxtjs/i18n is also supported

<template>
  <NuxtLinkLocale :to="`/parent/child/two/profile/${id}`" locale='fr'>Go to profile</NuxtLinkLocale>
  <NuxtLinkLocale :to="{ 
    name: 'parent-child-two-profile-id', 
    params: { id: 1 } 
  }">
      Go to profile 
  </NuxtLinkLocale>
</template>
Edit this page on GitHub
Table of Contents