search

nuxt-modules / og-image

Generate OG Images with Vue templates in Nuxt.
https://nuxtseo.com/og-image
360 stars 23 forks source link

defineOgImageComponent with dynamic values not working #190

Open Zafiiovskiy opened 2 months ago

Zafiiovskiy commented 2 months ago

Hi! trying to make defineOgImageComponent work with dynamic data that I get from CMS api in OnMonted for Nuxt3.

useSeoMeta({ description: () => descriptionMeta.value, })

the () => prop for useSeoMeta is working great for me but unfortunately defineOgImageComponent does not work like that and creates an image with emty or default values even if i give it ref or computed properties.

Do you know any way to make it work?

harlan-zw commented 2 months ago

Hey, thanks for the issue.

from CMS api in OnMonted for Nuxt3.

OG Image data needs to be defined within the Server Side response, if your data is only available onMounted then it will always be empty as this is only called on the client side. useSeoMeta would be showing you the right thing when you inspect the HTML but the SSR response still wouldn't have the meta (try view the page source).

You'll need to fetch the data top-level to fix this, if you still have issues please make a reproduction.