Nuxt3 i18n, how to use localePath and stuff in script setup

[angelo-at-webleaders]

Hey guys,

I am using Nuxt3 with i18n. I am able to switch language between English and Dutch, and I can use anything inside my but when I want to use stuff in my <script setup></script> that is where I don't know how to do it.

1. How can I access for example the localePath() function if I want to redirect a user to a specific page in the current language?
2. How can I translate my pages? in Nuxt 2 I added a page translation directly in the page itself i.e.

en: '/about-us',
nl: '/over-ons'

And when I would use localePath('/about-us') it would automatically use the correct one of the two above. How to do this in Nuxt 3?

Been Googling for hours but without any success. Hope someone can help me out!

[ineshbose]

Hi @angelo-at-webleaders,

I've also faced this difficulty and I realised that there are several ways to go around this. Since you are starting the link with /, that is a raw location while you can pass the name of a route, so if my page was named about, I can do localePath('about') to find the appropriate router path, while localePath('/about') may just add /about to your URL.

If you wish to keep the / (like I do, because I'm trying to integrate with nuxt/content that doesn't add definitions to the router), then I add translations for the page in JSON and then call the function using:

<script setup>
const { t } = useI18n();
const localePath = useLocalePath();
</script>

<template>
  <NuxtLink :to="localePath(`/${t('about')}`)">
    {{ t('about') }}
  </NuxtLink>
</template>

If you wish to do away with the /, and localePath('about') may not work (depending on your routing strategy - read https://v8.i18n.nuxtjs.org/guide/routing-strategies), the generated route names would still be about__en and about__nl, and so you can do:

<script setup>
const { locale } = useI18n();
const localePath = useLocalePath();
</script>

<template>
  <NuxtLink :to="localePath(`about__${locale}`)">
    About
  </NuxtLink>
</template>

Hopefully this is able to give an idea and resolve your problem!