Api

Components

Components API for Nuxt i18n module.

<NuxtLinkLocale>

This component is built on top of <NuxtLink> but changes the default behavior by internally using localePath() to make it easier to link to localized routes.

Examples

Basic usage

<template>
  <NuxtLinkLocale to="/">{{ $t('home') }}</NuxtLinkLocale>
</template>

<!-- equivalent to -->

<script setup>
const localePath = useLocalePath()
</script>

<template>
  <NuxtLink :to="localePath('/')">{{ $t('home') }}</NuxtLink>
</template>

Forcing locale resolution

<template>
  <NuxtLinkLocale to="/" locale="nl">{{ $t('home') }}</NuxtLinkLocale>
</template>

<!-- equivalent to -->

<script setup>
const localePath = useLocalePath()
</script>

<template>
  <NuxtLink :to="localePath('/', 'nl')">{{ $t('home') }}</NuxtLink>
</template>

Props

This component supports all props documented for <NuxtLink> in addition to props described below.

PropDescription
localeOptional prop to force localization using passed Locale, it defaults to the current locale. Identical to locale argument of localePath()

This component acts as a constrained <NuxtLink> which internally uses switchLocalePath to link to the same page in the provided locale.

With experimental.switchLocalePathLinkSSR enabled, this component will correctly render dynamic route parameters during server-side rendering.

Examples

Basic usage

<template>
  <SwitchLocalePathLink locale="nl">Dutch</SwitchLocalePathLink>
  <SwitchLocalePathLink locale="en">English</SwitchLocalePathLink>
</template>

<!-- equivalent to -->

<script setup>
const switchLocalePath = useSwitchLocalePath()
</script>

<template>
  <NuxtLink :to="switchLocalePath('nl')">Dutch</NuxtLink>
  <NuxtLink :to="switchLocalePath('en')">English</NuxtLink>
</template>

Props

This component supports most, but not all props documented for <NuxtLink> (does not support to or href) in addition to props described below.

PropDescription
localeOptional prop to force localization using passed Locale, it defaults to the current locale. Identical to locale argument of switchLocalePath()

Copyright © 2024