Nuxt•2y ago

i18n a blog with dynamicRouteParams

Hi! I'm creating a blog. I created a dynamic page [blog] .vue. At this point for each page I fetch the data with useAsyncData. So far everything is ok. However, I need that each article be associated with its corresponding language (with translated url). Here is the problem. At this point on the nuxt.config.ts I set

i18n: {
  dynamicRouteParams: true,
},

i18n: {
  dynamicRouteParams: true,
},

Ok, now as documentation (https://v8.i18n.nuxtjs.org/options/routing#dynamicrouteparams) inside [body].vue I have set

definePageMeta({
  nuxtI18n: {
    en: { id: 'my-post' },
    fr: { id: 'mon-article' }
  }
})

definePageMeta({
  nuxtI18n: {
    en: { id: 'my-post' },
    fr: { id: 'mon-article' }
  }
})

The problem is that definePageMeta is a compiler macro therefore, the page meta object cannot reference the component (or values defined on the component). (https://nuxt.com/docs/guide/directory-structure/pages/#page-metadata) This means that i cant change dinamically nuxtI18n object like this

const data= await useAsyncData(...)

definePageMeta({
  nuxtI18n: {
    en: { 
      blog: data.alternate_languages.en.url
    },
    fr: { 
      blog: data.alternate_languages.fr.url
    }
  }
})

const data= await useAsyncData(...)

definePageMeta({
  nuxtI18n: {
    en: { 
      blog: data.alternate_languages.en.url
    },
    fr: { 
      blog: data.alternate_languages.fr.url
    }
  }
})

At this point dynamicRouteParams:true is useless and i have no way to translate an article

Nuxt

pages/

Nuxt provides a file-based routing to create routes within your web application.

Routing

Routing and Strategies options.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

i18n a blog with dynamicRouteParams