Components

<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.

With experimental.switchLocalePathLinkSSR enabled, this component will correctly render 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.

PropDescription
localeOptional 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>

Copyright © 2024