Vue <script setup> Top level await causing template not to render

user_8703931 0
Viewed 4808

I'm using the new syntax in Vue 3 and I really like the idea of it, but once I tried to use a top level await I started to run in some problems.

This is my code:

<template>
  <div class="inventory">
    <a class="btn btn-primary">Test button</a>
      <table class="table">
        <thead>
          <tr>Name</tr>
          <tr>Description</tr>
        </thead>
        <tbody>
          <tr v-for="(item, key) in inventory" :key="key">
            <td>{{ item.name }}</td>
            <td>{{ item.description }}</td>
          </tr>
        </tbody>
      </table>
  </div>
</template>

<script setup lang="ts">
import { apiGetInventory, GetInventoryResponse } from '@/module/inventory/common/api/getInventory'

const inventory: GetInventoryResponse = await apiGetInventory()
</script>

As you can see it's not that complicated, the apiGetInventory is just an axios call so I won't bother going into that. The problem is, that if I have this top level await, my template doesn't render anymore, it's just a blank page in my browser. If I remove the two lines of code, it works fine. Also the promise seems to revolve just fine, if I place a console.log(inventory) underneath it I get an array with objects all fine and dandy.

Anyone have a clue what's going wrong here?

promise vue.js javascript
3 Answers

Top-level await must be used in combination with Suspense (which is experimental).

You should be able to just do it in onBeforeMount. Not as elegant; but a solid solution. Something like this:

<script setup lang="ts">
import { apiGetInventory, GetInventoryResponse } from '@/module/inventory/common/api/getInventory';
import {ref, onBeforeMount} from 'vue';

const inventory = ref<GetInventoryResponse>()

onBeforeMount( async () => {
    inventory.value = await apiGetInventory()
})
</script>
user_33309810

Using onBeforeMount is good, but there are a couple of other options.

@skirtle suggested in Vue Discord chat to do the initialization inside an async lambda or function (possibly as an IIFE):

<script setup lang="ts">
let inventory: GetInventoryResponse
const loadData = async () => inventory = apiGetInventory()
loadData()
</script>

@wenfang-du suggested in How can I use async/await in the Vue 3.0 setup() function using Typescript to use promise chaining:

<script setup lang="ts">
let inventory: GetInventoryResponse 
apiGetInventory().then(d: GetInventoryResponse => inventory = d)
</script>

The benefit of doing so is that the code is run before the beforeMount lifecycle hook.

You additionally need to take care of error handling as appropriate in both cases.

user_2587720

if you need for specific template(routes). You can use router beforeResolve:

import { apiGetInventory, GetInventoryResponse } from '@/module/inventory/common/api/getInventory'

let inventory = false
router.beforeResolve(async to => {
    // Skip if loaded or for specific vue file
    if (inventory || to.meta?.layout === 404 || to.meta?.layout === 'blank') {
        return
    }
    inventory = await apiGetInventory()
})
user_13062620
Related