i18n: Configuring Dynamic Translated Slugs
Hi everyone,
I'm working on getting dynamic translated slugs for dynamic pages in my Nuxt project. Everything is functioning well, but I need some help with configuring custom dynamic slugs based on the language.
Here's what I have:
Example pages:
http://localhost:3000/project/fashion-and-design
http://localhost:3000/es/proyecto/moda-y-diseno
http://localhost:3000/nl/project/mode-en-design
The problem:
When I switch languages on any of these pages (e.g., from the English page), it redirects to:
http://localhost:3000/project/fashion-and-design
http://localhost:3000/es/proyecto/fashion-and-design
http://localhost:3000/nl/project/fashion-and-design
What I want:
I want the slugs to be dynamically translated based on the selected language. For example, switching from English to Spanish should redirect to:
http://localhost:3000/project/fashion-and-design
http://localhost:3000/es/proyecto/moda-y-diseno
http://localhost:3000/nl/project/mode-en-design
Thanks in advance! :)
Here's my current Nuxt config:
i18n: {
baseUrl: process.env.NUXT_PUBLIC_SITE_URL || 'http://localhost:3000',
vueI18n: './i18n.config.ts',
locales: [
{
code: 'en',
name: 'English',
file: 'en.json'
},
{
code: 'es',
name: 'Español',
file: 'es.json'
},
{
code: 'nl',
name: 'Nederlands',
file: 'nl.json'
}
],
customRoutes: 'config', // disable custom route with page components
pages: {
'about': {
en: '/about-me',
es: '/sobre-mi',
nl: '/over-mij'
},
'project/[name]': {
es: '/proyecto/[name]',
nl: '/project/[name]'
}
},
defaultLocale: 'en',
}2 Replies
It seem like you can do it by adding definePageMeta({name: ...}) to your pages
And setting experimental.setMetaPage to true.
Read more here:
https://i18n.nuxtjs.org/docs/guide/custom-paths#definepagemeta-name-caveat
Thank you! Will try it