[Vuejs]-Vue 3 Fetching the data and passing to child components

by

1👍

✅

When dealing with asynchronous data required in your components, you have basically two options:

  1. You render the components before you get the data. It can be with default values or a loading state
<template>
  <div v-if="!myAsyncData">Loading...</div>
  <div v-else>{{ myAsyncData }}</div>
</template>

<script setup>
const myAsyncData = ref(null)
async function load() {
  myAsyncData.value = await /* http call */
}

load() // will start to load and rendering the component
</script>
  1. You await the response in the setup hook combined with the <Suspense> component so it starts to render only when the data is available.

Example (playground):

<!-- App.vue -->
<template>
  <Suspense>
    <Parent />
  </Suspense>
</template>

<!-- Parent.vue -->
<template>
  <div>{{ myAsyncData }}</div>
</template>

<script setup>
const myAsyncData = ref(null)
async function load() {
  myAsyncData.value = await /* http call */
}

await load() // will wait this before rendering the component. Only works if the component is embebbed within a [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense.html) component.
</script>
👤Kapcash

Leave a comment