How to use localePath() with route params?

[MickL]

How to use localePath() with route params?

[steffenstolze]

<NuxtLink :to="`${localePath('products')}/${item.global_name}`" v-for="item of products"> ....

for a URL like https://mywebshop.com/en/products/macbook-pro-14

and a Nuxt folder structure like

i18n config in nuxt.config.ts like

	i18n: {
		locales: [
			{
				code: 'de',
				iso: 'de-DE',
				name: 'Deutsch',
			},
			{ code: 'en', iso: 'en-GB', name: 'English' },
		],
		strategy: 'prefix',
		defaultLocale: 'de',
		customRoutes: 'config',
		rootRedirect: 'de',
		pages: {
			index: { de: '/', en: '/' },
			'products/index': { de: '/produkte', en: '/products' },
			'products/[id]': { de: '/produkte/[id]', en: '/products/[id]' },
		},
		detectBrowserLanguage: {
			useCookie: true,
			cookieKey: 'i18n_redirected',
			redirectOn: 'root',
			fallbackLocale: 'de',
		},
	},

[BobbieGoede]

We should document this better, my recommendation would be to use an object with the route name localePath({ name: 'route-name', params: { id: 123 } }) (this should work with all configurations).

I think passing paths works with certain configurations but as you have noticed it won't when using 'prefix' strategy (this is technically difficult while supporting localized paths and disabled localized paths). I'm sure we'll have that working at some point but for now we should document the most reliable method 😄

[MickL]

I always try to avoid using route names because they are hard to find and sometimes I just cant find the right one at all

[BobbieGoede]

I agree they're a bit hidden, I used to check devtools often to make sure I had the correct route name. But currently it's the most reliable way to retrieve routes regardless of i18n configuration, as the route name remains (essentially) the same across languages while the route path does not due to localization, prefix strategy, parameters and encoding.

You can also set a custom route name using definePageMeta({ name: 'my-route' }) if you prefer, this should work as long as Nuxt's experimental.scanPageMeta is enabled.

[MickL]

I use custom route paths per language, e.g. /products becomes /produkte in German. Now I want to link to /products/123 and the dev tools show me as the name products-id___de but that cant be right?

This is why I tried to avoid path names, but in this case I have to use them. How can I use them with custom route paths? E.g. I have the following file structure:

/products/index.vue
/products/[id].vue

Which I map to:

/products
/products/123
/produkte
/produkte/123

[MickL]

I think I got it:

localePath({ name: 'products-id', params: { id: props.id } })