Dynamic routing in Nuxt 3 with I18n

Question

I have problem with my Nuxt 3 project and with dynamic routing.

I need redirect between this pages:

/products/all
/products/favorites

My pages structure is:

pages/
├── products/
├──── [type].vue

Template:

<template>
   <NuxtLink :to="localePath({ name: 'products', params: { type: 'all' } })>All</NuxtLink>
   <NuxtLink :to="localePath({ name: 'products', params: { type: 'favorites' } })>Favorites</NuxtLink>
</template>

<script setup>
const localePath = useLocalePath()
</script>

nuxt.config.json

export default defineNuxtConfig({
    devtools: { enabled: true },
    modules: [
        '@nuxtjs/i18n',
    ],
    i18n: {
        vueI18n: './translations/i18n.config.ts',

        // locales: ['sk'], // used in URL path prefix
        locales: [
            { code: 'sk', iso: 'sk-SK', name: 'Slovenčina' },
        ],
        defaultLocale: 'sk',

        strategy: 'prefix_and_default', // prefix_except_default | prefix_and_default

        customRoutes: 'config',
        pages: {
            'products/[type]': {
                sk: '/produkty/[type]'
            },
        },
    }
})

i18n.config.ts import sk from './locales/sk/default.json'

export default defineI18nConfig(() => ({
    legacy: false,
    locale: 'sk',
    fallbackLocale: 'sk',
    dynamicRouteParams: true,
    messages: {
        sk,
    }
}))

I need create NuxtLink for redirect to pages, but the above configuration and NuxtLink in template not working

thank you

Answer 1

Based on your page structure i think the name for your product page is 'products-type' and not 'products'.

localePath({ name: 'products-type', params: { type: 'all' } }