Data from useLazyAsyncData in useHead/useSeoMeta

[white crypt]

How can I use data from useLazyAsyncData with useHead/useSeoMeta? The issue is that data.value from useLazyAsyncData is null when my code for useHead/useSeoMeta is executed. My code for the head is complicated and seperated in several files, so the following code will not work for me.

const { pending, data: pokemon } = await useLazyAsyncData('pokemon', () =
    $fetch(`${API_BASE_URL}/pokemon/${route.params.id}`)
  );
  
  useSeoMeta({
    title: () => pokemon.value?.name,
    description: () => `${pokemon.value?.name} description`,
  });

Is there another way to use data from useLazyAsyncData? How can I make my code wait until the data is not null?

[hollow oak]

Is there some reason you can't use await useAsyncData?

[white crypt]

@hollow oak I want instant page/route changing, so the page is visibly loading (skeleton) while the data is being loaded.

[tacit perch]

Hi @white crypt Did you find an answer for this? I'm actively trying to get this working on my side as well.

[tacit perch]

BTW, I did get this working on my side.

in my case I have a page that is using SSR and does not re-fetch on the client. There were a few gotchas

1. I had to await useFetch. Not awaiting it allowed my content to render correctly, but did not interact correctly with useServerSeoMeta
2. useServerSeoMeta prevents this from being updated on the client, after it is too late.

for the OPs issue, I suspect they need to await the $fetch call in useLazyAsyncData

This is the code I used successfully

const { data } = await useFetch(`/api/results/${route.params.eventKey}`, {});
useServerSeoMeta({
  twitterTitle: () => data.value?.eventName || "Generic Page",
  twitterCard: "summary",
});