Components

<i18n-link>

The <i18n-link> component is a NuxtLink to the route in the active locale; external URLs open in a new tab.

<i18n-link> renders a NuxtLink to to in the active locale. Use it instead of <NuxtLink :to="$localePath(...)"> in templates. An external URL becomes a plain <a target="_blank" rel="noopener noreferrer">.

Props

RouteLocationNamedRaw | RouteLocationResolvedGeneric | string required

Target route. Localized automatically; an external URL is passed through unchanged.

activeStyle

CSSProperties

Inline style applied while the link points at the current route.

Slots

default

Link content.

Behaviour

to goes through $localePath: a path, a named route or a route object, with custom locale paths applied.
External: a string starting with http://, https:// or //, a bare domain (example.com), or a tel: / mailto: link. A bare domain gets https://, and any slash-less dotted string counts as one: write a local file as /report.pdf, not report.pdf.
Active: when the current route.path equals the localized path (query and hash ignored), activeStyle is applied. There is no active class and no default active style.
Other attributes (class, aria-*) fall through to the link.

Example

<template>
  <i18n-link to="/about" :active-style="{ fontWeight: 'bold' }">{{ $t('nav.about') }}</i18n-link>
  <i18n-link :to="{ name: 'blog-slug', params: { slug: 'hello' } }">{{ $t('nav.post') }}</i18n-link>
  <i18n-link to="https://github.com/s00d/nuxt-i18n-micro">GitHub</i18n-link>
</template>

$localePath

<i18n-switcher>

Links to the current page in other locales

<i18n-t>

The <i18n-t> component renders one translation, with plural forms, number and date formatting, HTML and slot interpolation.