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.

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

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>

Copyright © 2024