Howdy folks. I'm busy with a new Nuxt 3 site using Directus as the content backend and struggling to set the ogImage using the dynamic data set in Directus. The title, description work fine, but the image id is being set as undefined, even though it works fine if i add it in the template code.
Here is my script block (set in the default layout):
const { getSingletonItem } = useDirectusItems()
const global = await getSingletonItem({
collection: 'global',
params: {
fields: [
'seo_title',
'seo_description',
'seo_image',
'favicon'
],
}
})
const { getThumbnail: img } = useDirectusFiles()
useSeoMeta({
title: global.seo_title,
ogTitle: global.seo_title,
description: global.seo_description,
ogDescription: global.seo_description,
ogImage: img(global.seo_image)
})
useHead({
link: [{ rel: 'icon', type: 'image/png', href: img(global.favicon) }],
})
</script>```
and the code in my template:
```<template>
<div class="p:0 m:0">
<!-- <pre>{{ global }}</pre>
{
"seo_title": "Nieke Munning",
"seo_description": "Hello, I'm Nieke - a natural health consultant combining bioresonance therapy, nutrition and reflexology, now in the Garden Route, South Africa.",
"seo_image": "a264a30d-abea-4f1b-9b36-074586b459b6",
"favicon": "1a89c7cf-6220-4097-b193-027a95a5f461"
}
<h1 v-html="global.seo_title" />
<img :src="img(global.seo_image)" />
<img :src="img(global.favicon)" /> -->
<LayoutHeader />
<slot></slot>
<LayoutFooter />
</div>
</template>```
I tried useSeoMeta, but get the same output. This is what is outputted in the head:
```<link rel="icon" type="image/png" href="https://cms.site.com/assets/undefined?access_token=tokenhere">```
Both the title and description are set correctly, but I can't for the life of me get the seo image to work.
Any idea what I'm missing?
TIA,
Chris