Vue 3·Vue from reactivity to a routed app

Lifecycle and data fetching

Fetch data after mount and handle loading, error and empty states.

Intermediate 14 min read Lesson 8 of 300 Challenge included

What you will be able to do

Use onMounted for initial data loading.
Track loading and error separately.
Use AbortController to cancel outdated requests.
Always render an empty state.

In plain English

onMounted runs after the component is inserted. Fetch there, then render loading, error and content states. Cancel or ignore stale requests when the component unmounts or the query changes.

lessons.vueJavaScript

<script setup>
import { onMounted, ref } from 'vue'

const lessons = ref([])
const loading = ref(true)
const error = ref('')

onMounted(async () => {
  try {
    const response = await fetch('/api/lessons')
    if (!response.ok) throw new Error('Request failed')
    lessons.value = await response.json()
  } catch (e) {
    error.value = e.message
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <p v-if="loading">Loading…</p>
  <p v-else-if="error">{{ error }}</p>
  <p v-else-if="!lessons.length">No lessons yet.</p>
  <ul v-else><li v-for="lesson in lessons" :key="lesson.id">{{ lesson.title }}</li></ul>
</template>

Your turn

Handle an empty list

Easy

Add an empty-state paragraph when the fetched array has no items.

HTML · starter

<ul v-else>

Check your understanding before moving on.

Knowledge checkQuestion 1

Which hook runs after the component is mounted?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Routing

Lesson 8 of 300 · 0% of course