Using Suspense component in vue 3 along with Options API

Question

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.

Answer 1

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.