<SwitchLocalePathLink>
An enhanced constrained <NuxtLink> for rendering paths resolved from switchLocalePath
This component acts as a constrained <NuxtLink> which internally uses switchLocalePath() to link to the same page in the provided locale.
We especially recommend using this component for language-switchers since it will correctly update routes using dynamic route parameters during server-side rendering.
Props
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() |
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>