help: Is there no asyncData equivalent?

[rozbehsharahitxb]

📚 What are you trying to do? Please describe.
I am trying to find an equivalent for asyncData in @nuxt/composition-api, which prevents the template being rendered before being resolved.

🔍 What have you tried?
I read into the documentation, which is very short on this topic and specially this line has caught my attention:

However, if the call hasn't been carried out on SSR ......, it returns a null ref that is filled with the result of the async call when it resolves.
https://composition-api.nuxtjs.org/API/useAsync

Furthermore I did some code tryouts to verify my interpretation of this sentence.

An initial state of null further means, we have to implement v-if statements in the template. Otherwise things might break, specially computed properties relying on async data.

This was not the case before @nuxt/composition api, where asyncData needed to be resolved before the template was rendered.

ℹ️ Additional context
Also this issue (loading-bar) is related imo:
Loading-Bar-Issue: #428

No-Loading Bar =>
Template is rendered before useAsync (client-side) is resolved =>
need of putting v-ifs =>
jumpy pages/ugly in-page-fade-in-animations...

I know that asyncData can still be used, nevertheless composables are not available on asyncData due to their nature of composing a component, which can not happen on this stage i guess (server-side). Some third party libraries however only provide access to their features and api-calls via composables. Example: vue-storefront.
https://docs.vuestorefront.io/v2/commercetools/composables/use-product.html#examples

In the end, I am not even sure, if this is really a

• @nuxt/composition-api issue
• an issue of third-party-libraries using composables
• or rather an issue with composition-api in general.

Finally my question

Is it even possible to implement a real asyncData equivalent, which is:

• compatible to composables
• compatible to nuxt loading-bar
• prevents the template of being rendered before useAnync-calls are resolved

I think specially the last point would need some kind of hook between setup and rendering of the template.

[RozbehSharahi]

In code this means:

---

This will throw an exception since foo is initially null

<template>
 <div>{{ foo.bar }}</div>
</template>
<script>
export default {
 setup () {
    const route = useRoute();
    const foo = useAsync(async () => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            bar: 'hello world'
          });
        }, 3000);
      });
    }, route.value.params.slug);

    return {
      foo
    };
  }
}  
</script>

This will not throw an exception since the template is not even rendered before asyncData is resolved:

<template>
 <div>{{ foo.bar }}</div>
</template>
<script>
export default {
  async asyncData () {
    await new Promise((resolve) => {
      setTimeout(() => {
        resolve();
      }, 3000);
    });
    return {
      foo: {
        bar: 'hello world '
      }
    };
  }
}
</script>

Please keep in mind, that this issue only exists, if navigating to the page via nuxt-link, causing client-side asyncData or useAsync call.

Edit:
However i guess the current state of nuxt i just found in the issues:
#596 (comment)

[danielroe]

I'm afraid it's not possible to implement client-side navigation blocking purely within the composition API in Vue 2, as the navigation has already taken place before the setup() function runs.