docs: How to wrap useAsyncData for SSR aware code (seo meta tags)

[yllaw]

📚 Is your documentation request related to a problem?

I want to set meta tags server side for the web build.

The doc mentions to wrap useAsyncData for SSR aware code.

It is unclear how a implementation for such a wrapper function would look like.

🔍 Where should you find it?

https://ionic.nuxtjs.org/cookbook/web-and-device#a-single-codebase

ℹ️ Additional context

Our current workaround for SSR to set meta tags from asynchronous data on a nuxt/ionic web server is to

1. Wrap useSeoMeta & useServerSeoMeta like so:

useIonMeta.ts

export function useIonMeta(seoInput: UseSeoMetaInput) {
  useServerSeoMeta(seoInput);

  onIonViewWillEnter(() => {
    useSeoMeta(seoInput);
  });
}

2. Query async data and set tags in App.vue

App.vue

const { data } = await useFetch(`https://gorest.co.in/public/v2/users`);

  useIonMeta({
    title: () => data.value?.name,
    // more meta tags e.g. description, ogImageUrl, etc
  });

I would be more than happy to modify the docs and create a PR.

Thanks