I'm trying to implement the Suspense experimental feature with Typescript.
Here's the whole component making use of Suspense:
<script lang="ts" setup></script>
<template>
<div class="flex min-h-full">
<Transition name="page" mode="out-in">
<KeepAlive
><Suspense>
<template #default>
<EmailVerificationAsync />
</template>
<template #fallback>
<ProcessingVerification />
</template>
</Suspense>
</KeepAlive>
</Transition>
</div>
</template>
The EmailVerificationAsync
is - as its name indicates - an asynchronous component that takes a couple of seconds to be ready. The ProcessingVerification
one is a simple loader animation.
It's working well when using pure JS, but I'm getting the following errors when trying the TS implementation:
src/views/EmailVerification.vue:8:22 - error TS2339: Property 'default' does not exist on type '{}'.
8 <template #default>
~~~~~~~
src/views/EmailVerification.vue:11:22 - error TS2339: Property 'fallback' does not exist on type '{}'.
11 <template #fallback>
~~~~~~~~
I can't find where to type the template type to allow the use of both these properties.
Thanks in advance for any kind of help.