<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.
<template>
<NuxtLinkLocale to="/">{{ $t('home') }}</NuxtLinkLocale>
</template>
<!-- equivalent to -->
<script setup>
const localePath = useLocalePath()
</script>
<template>
<NuxtLink :to="localePath('/')">{{ $t('home') }}</NuxtLink>
</template>
<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>
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() |
<SwitchLocalePathLink>
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.
<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>
This component supports most, but not all props documented for <NuxtLink>
(does not support to
or href
) 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 switchLocalePath() |