Vue3 - typing of Suspense feature is failing

106 Views Asked by At

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.

0

There are 0 best solutions below