Dynamic Routes in Nuxt 3

[marcwieland95]

Describe the feature

Hey there,

I don't know if for my issue there's already a working solution. At least I don't get it to work for now.
I'm now working with Nuxt 3 (@nuxtjs/i18n: 8.0.0-rc.4) and in the process of upgrading from Nuxt 2.

I have dynamic routes with a slug/url that is translated and changes per language.
Before I was able to dispatch those params like this:

await store.dispatch('i18n/setRouteParams', {
      en: { postId: 'my-post' },
      fr: { postId: 'mon-article' }
    })

In the new version, I don't see such an option. Also since VueX also isn't the default (I'm using Pinia now as well). But how is it possible to push the slug to the route somehow and the package is resolving it with switchLocalePath?

In the documentation there's something mentioned about "Custom route paths", but it still doesn't make sense to me how to add those dynamic values.

Something like that and then the second part the actual name param is missing to me.

export default {
  nuxtI18n: {
    paths: {
      en: '/articles/:name',
      es: '/artículo/:name'
    }
  }
}

Thanks and would appreciate it if somebody has experience with this feature.

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide (The contribution guideline of nuxt-modules/i18n is compliant with Nuxt too).
• Check existing discussions and issues.

[TomKremer]

Hi,
I got the same issue. The current doc explains using definePageMeta (https://v8.i18n.nuxtjs.org/guide/lang-switcher) but the issue is, this function cannot be used async with loading content which includes the language specific slugs or uids.

Also an Idea would be to change the copy of the doc from:

Be sure you have not set the dynamicRouteParams option to false in Nuxt i18n module's options.

to possible version:
To make dynamic route parameters work, set the dynamicRouteParams option to true in Nuxt i18n module's options.
(because the default is false)

Best,
Tom

[marcwieland95]

While your point is correct and the dynamicRouteParams needs to be set correctly (to true), this isn't the point of my ticket.

Dynamic slug translation doesn't work at all for now. Unless you're hardcoding it in the code (which isn't a use-case in production). That's why it's added as a feature for the stable release (v8).

[marcwieland95]

@TomKremer I just checked. The documentation is inside this repo and will be generated from here. Why you don't create a pull request with the adjusted documentation text?

[TomKremer]

voilà #2454

[AndersCV]

@kazupon Is there any updates for this feature? As mentioned above if you're building a large application - having all translated dynamic slugs hardcoded as strings is not viable.

[50l3r]

i came from this issue: #2100

Dynamic routes works with definePageMeta which makes it impossible to define "dynamic" routes.

Much like defineEmits or defineProps (see Vue docs ), definePageMeta is a compiler macro. It will be compiled away so you cannot reference it within your component. Instead, the metadata passed to it will be hoisted out of the component. Therefore, the page meta object cannot reference the component (or values defined on the component). However, it can reference imported bindings.

This doesnt work

const enUrl = 'first-route'
const frUrl = 'second-route'

definePageMeta({
  nuxtI18n: {
    en: { url: enUrl },
    fr: { url: frUrl }
  }
})

The problem is that in large applications, as in my case, the routes are given from a backend.

My backend gives me the route for each language but it is impossible for me to specify it to nuxti18n.

[scherii]

For lack of a better way, I currently set the routes like this in the [...slug.vue]:

useRoute().meta.nuxtI18n = {
	en: { slug: [getSlugByLanguage('en')] },
	de: { slug: [getSlugByLanguage('de')] },
	fr: { slug: [getSlugByLanguage('fr')] },
	it: { slug: [getSlugByLanguage('it')] }
}

getSlugByLanguage() just returns the respective slug provided by the backend.

[50l3r]

For lack of a better way, I currently set the routes like this in the [...slug.vue]:

useRoute().meta.nuxtI18n = {
	en: { slug: [getSlugByLanguage('en')] },
	de: { slug: [getSlugByLanguage('de')] },
	fr: { slug: [getSlugByLanguage('fr')] },
	it: { slug: [getSlugByLanguage('it')] }
}

getSlugByLanguage() just returns the respective slug provided by the backend.

At the moment its the only & best way to handle this situation.

Much thanks @scherii

[TomKremer]

I also gave it a try, it works but only client-side if I'm correct? The page is still served with incorrect meta. Could anyone check if their page is served correctly? Many Thanks!

[BobbieGoede]

@TomKremer
That's correct, this workaround will not update the meta tags as the head tags will already have been rendered. I hope to fix that with #2580

[scherii]

Hi @TomKremer

Yes, the useRoute().meta.nuxtI18n part resolves the issue with the language switcher by providing each page with the paths to its corresponding translations.

only client-side if I'm correct?

This should work on both the client and server sides.

Until #2580 is ready you would have to set this manually as well (through useHead or useSeoMeta). To get the alternate links with hreflang there is useLocaleHead.

const i18nHead = useLocaleHead({ addSeoAttributes: true })

useHead({
	htmlAttrs: { lang: i18nHead.value.htmlAttrs.lang },
	link: [...i18nHead.value.link],
	meta: [...i18nHead.value.meta]
})

useSeoMeta({
	// see https://nuxt.com/docs/api/composables/use-seo-meta
})

[BobbieGoede]

With #2580 merged and released in rc.9 I will close this issue.

Try out the new useSetI18nParams composable, more detailed example of its usage here!

If you run into any bugs please open a new issue with a minimal reproduction 💪