Components
<NuxtLinkLocale>
A shorthand component for using localePath with <NuxtLink>
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.
Props
This component supports all props documented for <NuxtLink> in addition to props described below.
| Prop | Description |
|---|---|
locale | Optional prop to force localization using passed Locale, it defaults to the current locale. Identical to locale argument of localePath() |
Examples
Basic usage
The to prop accepts a route name or a route object using the name property:
<template>
<NuxtLinkLocale to="index">{{ $t('home') }}</NuxtLinkLocale>
<NuxtLinkLocale :to="{ name: 'index' }">{{ $t('home') }}</NuxtLinkLocale>
</template>
<!-- equivalent to -->
<script setup>
const localePath = useLocalePath()
</script>
<template>
<NuxtLink :to="localePath('index')">{{ $t('home') }}</NuxtLink>
<NuxtLink :to="localePath({ name: 'index' })">{{ $t('home') }}</NuxtLink>
</template>
Forcing locale resolution
<template>
<NuxtLinkLocale to="index" locale="nl">{{ $t('home') }}</NuxtLinkLocale>
</template>
<!-- equivalent to -->
<script setup>
const localePath = useLocalePath()
</script>
<template>
<NuxtLink :to="localePath('index', 'nl')">{{ $t('home') }}</NuxtLink>
</template>
Path strings
Passing a path string works at runtime and is kept for backwards compatibility:
<template>
<NuxtLinkLocale to="/">{{ $t('home') }}</NuxtLinkLocale>
</template>
We recommend using named routes (as in the examples above) instead of path strings. Paths depend on the configured
strategy and custom paths, meaning a path that resolves correctly today can silently stop matching when the routing configuration changes. For this reason the to prop only accepts named routes on the type level when typedPages is enabled.