nuxt3 i18n for nested routes

Question

For nuxt3 i18n is there any way to :to for nested and translated route? for example istead of

<NuxtLink :to="`${localePath('ser')}/${$t('est')}/${$t('pro')}`">

something like this

<NuxtLink :to="`${localePath('ser/est/pro')}`">

and in the page setup

<script setup>
  const route = useRoute()
  console.log("route.params-----------", route)
  defineI18nRoute({
    paths: {
      en: "/ser/est/pro",
      nl: "/die/scha/ggg",
      fr: "/ser/dev/pp",
      fa: "rr/خ/تخ"
    }
  })
</script>

?

Answer 1

You mean something like this?

<NuxtLink
   :to="localePath({ 
     name: 'category-slug', 
     params: { slug: category.slug } 
   })"
>
   {{ category.title }}
</NuxtLink>

With a configuration like this:

i18n: {
    customRoutes: 'config',
    pages: {
        'category/[slug]': {
        // params need to be put back here as you would with Nuxt Dynamic Routes
        // https://nuxt.com/docs/guide/directory-structure/pages#dynamic-routes
        it: '/categoria/[slug]'
        // ...
    },
}

Is this what you meant?