Vue Academy · Lesson

Lifecycle Hooks and Data Fetching

Fetch data at the right point in the component lifecycle.

Lifecycle Hooks and Data Fetching is a free Vue Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

When to Fetch Data

Components have a lifecycle: they are created, mounted to the DOM, updated, and eventually unmounted. Knowing which lifecycle hook to use for data fetching keeps your app responsive and correct.

The created Hook

The created hook runs after reactive data is set up but before the component is inserted into the DOM. It is a good place to start fetching data because reactivity already works.

export default {
  data() {
    return { posts: [] }
  },
  created() {
    this.fetchPosts()
  }
}

The mounted Hook

The mounted hook runs after the component is inserted into the DOM. Use it when your fetch logic needs access to DOM elements or third-party libraries that require a rendered element.

export default {
  mounted() {
    this.fetchPosts()
    // template refs are now available here
  }
}

created vs mounted

For pure data fetching, both work. created fires slightly earlier, so the request starts sooner. Choose mounted only when you truly need the rendered DOM. For most API calls, either is fine.

onMounted in Composition API

In the Composition API, lifecycle hooks are imported functions called inside setup. The equivalent of mounted is onMounted.

import { ref, onMounted } from "vue"
import { api } from "./api"

export default {
  setup() {
    const posts = ref([])
    onMounted(async () => {
      const res = await api.get("/posts")
      posts.value = res.data
    })
    return { posts }
  }
}

The Loading State Pattern

Network requests take time. Track a loading flag so you can show a spinner while data arrives and hide it when done.

data() {
  return {
    posts: [],
    loading: false
  }
}

Toggling Loading

Set loading to true before the request and back to false afterward, regardless of outcome.

async fetchPosts() {
  this.loading = true
  try {
    const res = await api.get("/posts")
    this.posts = res.data
  } finally {
    this.loading = false
  }
}

Showing a Loading Indicator

In the template, branch on the loading flag to display a spinner or message while data is on its way.

<template>
  <p v-if="loading">Loading...</p>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

Handling Empty Results

Always plan for an empty response. Show a friendly message when the fetched list has no items.

<ul v-if="posts.length">
  <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
<p v-else>No posts found.</p>

Composition API Loading Pattern

The same loading pattern translates cleanly to the Composition API with refs.

const posts = ref([])
const loading = ref(false)

async function load() {
  loading.value = true
  try {
    posts.value = (await api.get("/posts")).data
  } finally {
    loading.value = false
  }
}

onMounted(load)

Displaying Fetched Data

Once data is in reactive state, the template renders it automatically. Combine loading, data, and empty states for a polished user experience.

<template>
  <section>
    <p v-if="loading">Loading...</p>
    <ul v-else-if="posts.length">
      <li v-for="p in posts" :key="p.id">{{ p.title }}</li>
    </ul>
    <p v-else>Nothing here yet.</p>
  </section>
</template>

Quick Check

Test your knowledge of lifecycle hooks and fetching.

Recap

Fetch data in created or mounted (or onMounted in the Composition API). Track a loading flag with try/finally so the UI can show a spinner, render the data, and handle empty results. Next you will make these requests robust by handling errors and using interceptors.

Frequently asked questions

Is the “Lifecycle Hooks and Data Fetching” lesson free?

Yes — the full text of “Lifecycle Hooks and Data Fetching” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Lifecycle Hooks and Data Fetching”?

Fetch data at the right point in the component lifecycle. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Lifecycle Hooks and Data Fetching” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy