SSR dynamic meta data

[petrck]

I have problem with SSR and dynamic meta data loading. For example I have awaiting function getTitle() and need to set page title after request complete. In console log title value in reactive state is correct, but page title is not - there is still old the value.

Here is my code:

async setup() {
    const siteData = reactive({
      title: `My website`,
      description: `My beautiful website`,
    });
    
    useHead({
      title: computed(() => siteData.title),
      meta: [
        {
          name: `description`,
          content: computed(() => siteData.description),
        },
      ],
    })

    //Fetch request simulator...
    siteData.title = await getTitle();
    console.log(siteData.title); //Here is correct value
  }

How can I set dynamic meta data? Thank you for your time.

[rdunk]

Also having this problem. It looks like the watchEffect method that updates the tags/DOM is only executed on the client side, could that be the issue?
https://github.com/vueuse/head/blob/main/src/index.ts#L273-L291

EDIT: Seems the issue is more complex, the watchEffect method isn't triggered on the server even with that conditional removed as far as I can tell.

[rdunk]

After some additional investigation, it seems that maybe watchEffect is not the best solution for setting values on the server, as even with the additional flush option set to sync, they seem to only trigger once.

I'm not sure what alternative solution there might be... perhaps useHead accepting an async function or returning a method that allows for forced updating of the headTags?

[github-actions]

🎉 This issue has been resolved in version 0.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀