[Vuejs]-How to use Vue3 suspense?

by

1👍

It is not just an error in TS, apparently you need to use a #default slot in order for the #fallback slot to work:

  <Suspense>
  
    <template #default>
       <Dashboard />
    </template>

    <template #fallback>
      Loading...
    </template>

  </Suspense>

Instead of the #default slot, you can also use a div. Not sure why it works that way, my guess is that it is related to the single child rule of <suspense>.

Have a look at the snippet:

const { createApp } = Vue;

const Dashboard = {
  template: `Hello Dashboard`,
  async setup(props, { attrs, slots, emit, expose }) {
    await new Promise( resolve => setTimeout(resolve, 3000))
      return {}
  }
}

const App = { 
  components: { Dashboard },
  data() {
    return {
    }  
  }
}
const app = createApp(App)
app.mount('#app')
<div id="app">
<div>
  Works with #default slot:
  <Suspense>
  
    <template #default>
       <Dashboard />
    </template>

    <template #fallback>
      Loading...
    </template>

  </Suspense>
</div>
<div>
  Works with div:
  <Suspense>
  
    <template #default>
       <Dashboard />
    </template>

    <template #fallback>
      Loading...
    </template>

  </Suspense>
</div>
<div>
  does not work with single component:
  <Suspense>
 
    <Dashboard />

    <template #fallback>
      Loading...
    </template>

  </Suspense>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
👤Moritz Ringler

Leave a comment