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>.

Practice

1. What is the main purpose of server routes in a Vue app using Nitro?

easy

A. To style the frontend components

B. To handle backend requests and send responses

C. To manage client-side state only

D. To create animations on the page

Solution

1. Step 1: Understand server routes role

   Server routes act as backend endpoints that receive requests from the frontend.

2. Step 2: Identify their function in Vue Nitro

   They process these requests and return data or responses, enabling communication between frontend and backend.

3. Final Answer:

   To handle backend requests and send responses -> Option B

4. Quick Check:

   Server routes = backend communication [OK]

Hint: Server routes handle backend requests, not frontend styling [OK]

Common Mistakes:

• Confusing server routes with frontend styling
• Thinking server routes manage only client state
• Assuming server routes create animations

2. Which of the following is the correct way to define a server route in a Vue Nitro project?

easy

A. app.get('/api', () => 'Hello')

B. const route = () => { console.log('Hello') }

C. export default defineEventHandler(() => { return { message: 'Hello' } })

D. function serverRoute() { return 'Hello' }

Solution

1. Step 1: Recognize Nitro server route syntax

   In Vue Nitro, server routes export a default function using defineEventHandler that returns data.

2. Step 2: Check each option

   export default defineEventHandler(() => { return { message: 'Hello' } }) uses defineEventHandler and returns an object, which is correct. Others either lack export, use wrong syntax, or are not Nitro style.

3. Final Answer:

   export default defineEventHandler(() => { return { message: 'Hello' } }) -> Option C

4. Quick Check:

   Use defineEventHandler for Nitro routes [OK]

Hint: Look for export default with defineEventHandler [OK]

Common Mistakes:

• Missing export default
• Not using defineEventHandler
• Using Express.js style instead of Nitro

3. Given this server route code in Vue Nitro:

export default defineEventHandler(() => { return { status: 'ok', count: 5 } })

What will the frontend receive when calling this API?

medium

A. Undefined

B. A string 'ok5'

C. An error because of missing await

D. { status: 'ok', count: 5 }

Solution

1. Step 1: Analyze the returned object

   The route returns an object with keys status and count, so the response is JSON with those values.

2. Step 2: Understand Nitro response behavior

   Nitro automatically serializes the returned object to JSON for the frontend.

3. Final Answer:

   { status: 'ok', count: 5 } -> Option D

4. Quick Check:

   Returned object = JSON response [OK]

Hint: Returned object becomes JSON response automatically [OK]

Common Mistakes:

• Expecting string concatenation
• Thinking await is needed for sync return
• Assuming undefined if no explicit JSON

4. What is wrong with this Vue Nitro server route code?

export default () => { return { message: 'Hi' } }

medium

A. Missing defineEventHandler wrapper

B. Return value must be a string

C. Export default is not allowed

D. Arrow function syntax is invalid

Solution

1. Step 1: Check Nitro route requirements

   Vue Nitro requires server routes to export a default function wrapped with defineEventHandler.

2. Step 2: Identify missing part

   The code exports a function but does not use defineEventHandler, so it won't work as a proper Nitro route.

3. Final Answer:

   Missing defineEventHandler wrapper -> Option A

4. Quick Check:

   Always wrap route with defineEventHandler [OK]

Hint: Always use defineEventHandler for server routes [OK]

Common Mistakes:

• Forgetting defineEventHandler
• Thinking return must be string
• Confusing export default rules

5. You want to create a server route in Vue Nitro that returns a list of users filtered by a query parameter `role`. Which code correctly accesses the query and returns filtered users?

hard

A. export default defineEventHandler(event => { const role = getQuery(event).role; return users.filter(u => u.role === role) })

B. export default defineEventHandler(() => { return users })

C. export default defineEventHandler(event => { const role = event.node.req.url.split('role=')[1]; return users.filter(u => u.role === role) })

D. export default defineEventHandler(event => { const role = event.query.role; return users.filter(u => u.role === role) })

Solution

1. Step 1: Understand query access in Nitro

   Vue Nitro provides a helper getQuery(event) to safely get query parameters from the request.

2. Step 2: Check each option for correct query usage

   export default defineEventHandler(event => { const role = getQuery(event).role; return users.filter(u => u.role === role) }) uses getQuery(event).role correctly. export default defineEventHandler(event => { const role = event.node.req.url.split('role=')[1]; return users.filter(u => u.role === role) }) manually parses URL which is error-prone. export default defineEventHandler(() => { return users }) ignores query. export default defineEventHandler(event => { const role = event.query.role; return users.filter(u => u.role === role) }) uses event.query which is not standard.

3. Final Answer:

   export default defineEventHandler(event => { const role = getQuery(event).role; return users.filter(u => u.role === role) }) -> Option A

4. Quick Check:

   Use getQuery(event) to read query params [OK]

Hint: Use getQuery(event) to access query parameters [OK]

Common Mistakes:

• Parsing URL manually instead of getQuery
• Using event.query which is undefined
• Ignoring query parameters