How to seo, useSEometa in data useHttp

[VNWA]

`
const { data, status, error, refresh, clear } = await useHttp('/load-data')

watch(data, (newData) => {
console.log('newData', newData)
if (newData) {
useSeoMeta({
title: newData.data.meta?.title || 'Makeup & More',
ogTitle: newData.data.meta?.title || 'Makeup & More',
description: newData.data.meta?.desc || '',
ogDescription: newData.data.meta?.desc || '',
ogImage: newData.data.meta?.image
? useNuxtApp().$storage(newData.data.meta.image)
: '',
twitterCard: 'summary_large_image',
});
}
}, { immediate: true });
`

Please help me with the problem of useSomemeta dymanic when getting data

[k2so-dev]

useHttp works as a wrapper over useFetch, the difference is that useHttp uses its own interceptors.
You can see examples of useSeoMeta usage in nuxt.js documentation. https://nuxt.com/docs/api/composables/use-seo-meta#usage

Or you can use the reactive method useHead https://nuxt.com/docs/api/composables/use-head

[VNWA]

i did it this way and ok, the problem i think is in useHttp, because if i use Fetch it works (in production environment after deployment)
In dev everything is normal

Success:
`
const config = useRuntimeConfig();
const { data, refresh } = await useFetch("${config.public.apiUrl}/load-data-home-page");
const appearanceData = data.value as AppearanceData;

useSeoMeta({
title: appearanceData.meta.title,
description: appearanceData.meta.desc,
ogTitle: appearanceData.meta.title,
ogDescription: appearanceData.meta.desc,
ogImage: useNuxtApp().$storage(appearanceData.meta.image),
twitterTitle: appearanceData.meta.title,
twitterDescription: appearanceData.meta.desc,
twitterImage: useNuxtApp().$storage(appearanceData.meta.image),
});
`

Error:

`

const { data, refresh } = await useHttp("load-data-home-page");
const appearanceData = data.value as AppearanceData;

useSeoMeta({
title: appearanceData.meta.title,
description: appearanceData.meta.desc,
ogTitle: appearanceData.meta.title,
ogDescription: appearanceData.meta.desc,
ogImage: useNuxtApp().$storage(appearanceData.meta.image),
twitterTitle: appearanceData.meta.title,
twitterDescription: appearanceData.meta.desc,
twitterImage: useNuxtApp().$storage(appearanceData.meta.image),
});
`

[k2so-dev]

Ok, I'll check it out this week. For now, you can use useFetch instead of the custom wrapper. Or the reactive useHead instead of useSeoMeta.

[k2so-dev]

I couldn't reproduce the error. useSeoMeta works on data received via useHttp in ssr and spa modes as expected. Tested on Nuxt 3.16.1.