dynamicRouteParams with useAsyncData

[luca-smartpricing]

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,
},

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' }
  }
})

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
    }
  }
})

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

[ineshbose]

You are right in pointing out the problem that definePageMeta is a macro, so this usage is not intended or desirable with useAsyncData. In this scenario, I would recommend using useRouter.

[tipmisle]

Hey @ineshbose,
thanks for the recommendation. Can you please advise how exactly in this case we could use the useRouter to achieve the same result the OP has a problem with?

Oh and also @luca-smartpricing if you've figured it out, could you share it here too? I am currently facing the same issue.

Thank you both

[luca-smartpricing]

Hi @tipmisle,
sorry i was in holiday. No, I haven't find any "solution" but there is a work around . You can find it here #1730 . I think that's the major trad for the argument.