CODEWITHSUNDEEP
vue.jsasynchronousvuejs3vue-options-api
Adarsh Madrecha
Adarsh Madrecha

Reputation: 7936

Using Suspense component in vue 3 along with Options API

The docs https://vuejs.org/guide/built-ins/suspense.html#async-components says in order to use Suspense Components, we need to make the components "Asynchronous".

<script setup>
const res = await fetch(...)
const posts = await res.json()
</script>

<template>
  {{ posts }}
</template>

But I am not sure how to make components Async using Options API.

Upvotes: 0

Views: 1677

Answers (2)

Estus Flask
Estus Flask

Reputation: 223054

As the documentation states, only async setup function and asynchronous script setup are supported. Options API is legacy and isn't supposed to receive new features.

As it can be seen in source code, only setup is supported.

It may be possible to access internal component instance and follow the way setup works, e.g.:

beforeCreate() {
  this.$.asyncDep = promise;
},

But this is undocumented and hacky way that can become broken without notice.

Upvotes: 1

tony19
tony19

Reputation: 138656

With the Options API, the component is made an async component by using an async setup():

export default {
    👇
  async setup() {
    const res = await fetch(...)
    const posts = await res.json()
    return {
      posts
    }
  }
}

That's actually documented just above the docs section the question links to.

demo

Upvotes: 0

Related Questions