Is there a way to dynamically change route slug with nuxt/i18n?

Question

I don't know if I am handling this properly (I'm quite open to suggestions and improvements).

I am using @nuxt/i18n with nuxt3. I'll split this questions into two things that I want to do:

• Switch between locales on a dynamic route and also cause this dynamic route to change.

Well, I'm not too good explaining things so I'll show up the components:

Products.vue: here I have the products and I build the slug based on the language:

<NuxtLink :to="localePath(`/products/${item[locale].slug}`)">

This redirects to [slug].vue where I use the slug to search the product in the products list.

What's the problem? When I switch between languages the slug in the url doesn't change at all. I think this is expected but I don't know what to do to be honest.

Here's the result links:

• Default lang (EN): http://localhost:3000/products/mobile-radar-phototicket
• Switching to (ES): http://localhost:3000/es/products/mobile-radar-phototicket
• Expected when switching to (ES): http://localhost:3000/es/products/ES-translated-slug

The content inside the page change pretty well. But This is only because the page isn't refreshed.

When I refresh I get this error:

Cannot read properties of undefined (reading 'es')

at _sfc_main.setup (./pages/products/[slug].js:145:23)
at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:156:18)
at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7190:25)
at setupComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7151:36)
at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:614:15)
at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:743:14)
at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:698:7)
at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:631:12)
at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:743:14)

I think this error is related with how I use route.params in [slug].vue

const { slug } = useRoute().params;

I don't know if this is a sh*tty way of doing this, I'm open to suggestions of how to improve this. Also, In the second question I'll tell you another thing that I wanted to implement in order to iterate over the products list.

• Pass the product ID to [slug].vue instead of relying on the product slug to find it

Here comes the tricky part. I thought that this could be a better idea. So, on <NuxtLink :to="localePath(/products/${item[locale].slug})"> I tried to pass the product ID as a parameter, with no success at all.

With those things in mind, what do you think is the best solution for this? And also, for me it is more important to change the slug than to "fancy up" the way the product is included in the product list. But as I said, I'm more than happy to accept your suggestions.

Thanks!