Why API integration matters in Vue - See It in Action

Why API integration matters

📖 Scenario: You are building a simple Vue app that shows a list of books fetched from an online API. This helps users see book titles without manually typing them.

🎯 Goal: Create a Vue component that fetches book data from an API and displays the titles in a list. This shows how API integration brings live data into your app.

📋 What You'll Learn

Use Vue 3 Composition API with <script setup>

Create a reactive variable to hold book data

Fetch data from a sample API endpoint

Display the book titles in an unordered list

Handle loading state with a message

💡 Why This Matters

🌍 Real World

Many apps need to show live data from servers or services. API integration lets your app get fresh data automatically.

💼 Career

Understanding API integration is essential for frontend developers to build interactive and dynamic web applications.

1

Set up the initial data structure

Create a reactive variable called books initialized as an empty array using Vue's ref.

Vue

import { ref } from 'vue'

// Create a reactive variable called books as an empty array
// Your code here

Need a hint?

Use import { ref } from 'vue' and then const books = ref([]).

2

Add a loading state variable

Create a reactive variable called loading and set it to true to track if data is loading.

Vue

import { ref } from 'vue'

const books = ref([])

// Create a reactive variable called loading and set it to true
// Your code here

Need a hint?

Use const loading = ref(true) to track loading state.

3

Fetch book data from the API

Use Vue's onMounted lifecycle hook to fetch data from 'https://api.example.com/books'. When data arrives, set books.value to the fetched array and set loading.value to false.

Vue

import { ref, onMounted } from 'vue'

const books = ref([])
const loading = ref(true)

// Use onMounted to fetch data from 'https://api.example.com/books'
// Update books.value and loading.value accordingly
// Your code here

Need a hint?

Use onMounted with an async function to fetch and update books and loading.

4

Display the book titles and loading message

In the template, show Loading... if loading is true. Otherwise, display an unordered list with each book's title inside a <li> using v-for with book and index as variables.

Vue

import { ref, onMounted } from 'vue'

const books = ref([])
const loading = ref(true)

onMounted(async () => {
  const response = await fetch('https://api.example.com/books')
  const data = await response.json()
  books.value = data
  loading.value = false
})



  
  
  

Need a hint?

Use v-if and v-else to toggle loading message and list. Use v-for with book and index to list titles.