Vue-next: suspense tag in template code can not erase the warning: async setup() is used without a suspense boundary

[xland]

What problem does this feature solve?

suspense tag in template code can not erase the warning: async setup() is used without a suspense boundary

Template code:

<suspense>
<template #default>
  <div>aaa</div>
</template>
<template #fallback>loading...</template>
</suspense>

Script code:

export default {
  async setup() {
    let dataReady = ref(false);
    dataReady.value = await Promise.resolve(true);
    return {
      dataReady,
    };
  }
};

Warning:

async setup() is used without a suspense boundary!

What does the proposed API look like?

Clear that warning

[thecrypticace]

As I understand it a component with async setup is meant to be a child of the suspense component so you'd have to do something like the the following:

<Suspense>
  <template #default>
    <MyComponentWithAsyncSetup>
  </template>
  <template #fallback>loading...</template>
</Suspense>

[posva]

What @thecrypticace said!

[xland]

Thanks @posva @thecrypticace

Can I close that warning message?
I do not want to write Suspense tag in my parent template,
And I do not want to abstract my await code from the async setup function.

You know something like await Promise.resolve(true); will be excuted immediately.
Write Suspense tag in all parent components will be a big burden.

[thecrypticace]

The primary intent for async setup and async components is to allow components time to initialize because they don't have everything they need ready to be set up. An example would be if you are using code splitting in your application amd your component has to go fetch CSS, JS, or other assets over the network. There are other reasons to use async setup but if your primary use case is providing a component-local loading indicator for your data then regular setup + refs will nearly 100% of the time be what you want.

The main reason <Suspense> exists has to do with entire trees of async components. If any child / grandchild / etc… component in the tree is asynchronous it will block rendering of everything in that Suspense block until _all_ async components have resolved. It provides a good way to ensure that an entire subtree of your app is available before you display it.

I've created an example of this (albeit rather contrived) here: https://github.com/thecrypticace/vue-suspense-example

In your case I would do something like the following:

<template>
  <template v-if="dataReady">
    <div>aaa</div>
  </template>
  <template v-else>
    Loading...
  </template>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    let dataReady = ref(false);
    dataReady.value = Promise.resolve(true).then(() => {
      dataReady.value = true
    });
    return {
      dataReady,
    };
  }
};
</script>

[xland]

@thecrypticace

It's so kind of you.
Your comments help me a lot.
Thank you very much.

[xland]

@thecrypticace

I'm sorry to bother you again.
Have you noticed this phenomenon?
onMounted event in a grandchild component's setup function is fired too early.
Code:

In the grandparent component's template has a suspense tag:

    <suspense>
      <template #default>
        <keep-alive max="18">
          <router-view />
        </keep-alive>
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </suspense>

I think the onMounted event should be fired when the grandchild component mounted ready.
Am I wrong?

[thecrypticace]

Could you please file a separate issue with a reproduction link? It's hard for me to see the structure of your app and what the potential problem is from the screenshot and code above.

[xland]

When I create a new demo project to reappear this issue.
I found it is gone.
But I do not know why my old project has this issue.
I pay a whole day on it.
Maybe I need more time, or just let it go.
Thanks anyway.

[akauppi]

@xland Please consider GitHub issues as strictly for one topic only. These are useful even after they are closed - but they are not discussion forums. Also, to acknowledge someone's message you can use the emojis - comment like OK is rarely if even seen is issues.

(I make a huge exception to the stated rule even by writing this to you.)