nuxt3 i18n for non-english charachters

Question

This is the nuxt 3 link with i18n

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

The question is: when it use i got the error 404 but and

No match found for location with path "/fa/%D8%AE%D8%AAA/تن/ج"

but when the page refreshed it appears correctly. why and what is the solution?

Answer 1

You are using localePath incorrectly, with custom routes you should use it 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]'
        // ...
    },
}

This way you can define whatever custom route you want and avoid messy patchworks in your code.

i18n custom routes reference: https://v8.i18n.nuxtjs.org/guide/custom-paths