Server routes and API in Vue - Mini Project: Build & Apply

Server routes and API

📖 Scenario: You are building a simple Vue app that fetches a list of books from a server API and shows them on the page.The server has a route /api/books that returns a list of book objects with id and title.

🎯 Goal: Create a Vue component that fetches the books from the /api/books route and displays their titles in a list.

📋 What You'll Learn

Create a reactive variable to hold the books list

Create a variable for the API endpoint URL

Use the fetch API inside onMounted to get the books

Render the list of book titles in the template using v-for

💡 Why This Matters

🌍 Real World

Fetching data from server APIs and showing it in a web app is a common task in building interactive websites and apps.

💼 Career

Understanding how to connect Vue components to backend APIs is essential for frontend developers working on real-world projects.

1

DATA SETUP: Create a reactive variable for books

Create a reactive variable called books initialized to an empty array using ref([]) inside the <script setup> block.

Vue

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



  

Hint

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

2

CONFIGURATION: Add API endpoint URL

Create a constant called apiUrl and set it to the string "/api/books" inside the <script setup> block after the books variable.

Vue

import { ref } from 'vue'

const books = ref([])
// Create a constant apiUrl set to "/api/books"
// Your code here



  

Hint

Just write const apiUrl = "/api/books" after the books variable.

3

CORE LOGIC: Fetch books from API on mount

Import onMounted from 'vue'. Use onMounted to run a function that fetches data from apiUrl, converts the response to JSON, and assigns it to books.value.

Vue

import { ref } from 'vue'

const books = ref([])
const apiUrl = "/api/books"

// Import onMounted and fetch books inside onMounted
// Your code here



  

Hint

Use onMounted(async () => { ... }) and inside fetch the URL, then set books.value.

4

COMPLETION: Render book titles in template

In the <template>, use v-for on <li> to loop over books. Display each book's title. Use :key="book.id" on <li>.

Vue

import { ref, onMounted } from 'vue'

const books = ref([])
const apiUrl = "/api/books"

onMounted(async () => {
  const response = await fetch(apiUrl)
  const data = await response.json()
  books.value = data
})



  
  
    
  

Hint

Use <li v-for="book in books" :key="book.id">{{ book.title }}</li> inside the <ul>.