Server routes and API in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a GET route in a Vue server API.

Vue

export default defineEventHandler(async (event) => {
  if (getMethod(event) === '[1]') {
    return { message: 'Hello from API' }
  }
})

Drag options to blanks, or click blank then click option'

APOST

BDELETE

CPUT

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST instead of GET for fetching data

Forgetting to check the request method

The GET method is used to fetch data from the server. Here, we check if the request method is GET to respond accordingly.

2fill in blank

medium

Complete the code to extract a query parameter named 'id' from the request URL.

Vue

export default defineEventHandler((event) => {
  const id = getQuery(event).[1]
  return { id }
})

Drag options to blanks, or click blank then click option'

Aid

Bquery

Cparams

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'params' instead of 'id' for query parameters

Trying to access body instead of query

The getQuery(event) returns an object of query parameters. Accessing id gets the value of the 'id' parameter.

3fill in blank

hard

Fix the error in the code to correctly read JSON data from a POST request body.

Vue

export default defineEventHandler(async (event) => {
  if (getMethod(event) === 'POST') {
    const data = await [1](event)
    return { received: data }
  }
})

Drag options to blanks, or click blank then click option'

AgetQuery

BreadBody

CparseJSON

DreadJson

Attempts:

3 left

💡 Hint

Common Mistakes

Using getQuery to read body

Using non-existent parseJSON function

The readBody(event) function reads and parses the JSON body of the request in Vue server API.

4fill in blank

hard

Fill both blanks to create a route handler that responds only to DELETE requests and returns a success message.

Vue

export default defineEventHandler((event) => {
  if (getMethod(event) === '[1]') {
    return { message: '[2]' }
  }
})

Drag options to blanks, or click blank then click option'

ADELETE

BData deleted successfully

CPOST

DOperation completed

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST instead of DELETE

Returning a generic message instead of a deletion confirmation

The route checks if the request method is DELETE and returns a success message confirming deletion.

5fill in blank

hard

Fill all three blanks to create a route that reads a 'name' from the POST body and returns a greeting.

Vue

export default defineEventHandler(async (event) => {
  if (getMethod(event) === '[1]') {
    const body = await [2](event)
    return { greeting: `Hello, ${body.[3]!` }
  }
})

Drag options to blanks, or click blank then click option'

APOST

BreadBody

Cname

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET instead of POST

Trying to access a wrong property name

Not awaiting the body reading function

This code handles POST requests, reads the JSON body using readBody, and accesses the 'name' property to create a greeting.

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