Server routes and API in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Vue component display after fetching data?

Consider this Vue 3 component using the Composition API. It fetches user data from an API route and displays the user's name.

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const userName = ref('');
    onMounted(async () => {
      const response = await fetch('/api/user');
      const data = await response.json();
      userName.value = data.name;
    });
    return { userName };
  }
}

Assuming the API returns { "name": "Alice" }, what will the component render inside <div>?

Vue

<template>
  <div>{{ userName }}</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const userName = ref('');
onMounted(async () => {
  const response = await fetch('/api/user');
  const data = await response.json();
  userName.value = data.name;
});
</script>

A The div will remain empty because fetch is asynchronous and userName is never updated.

B The div will show 'Alice' after the fetch completes.

C The div will show '[object Promise]' because fetch returns a promise.

D The div will show 'undefined' because data.name is not set.

💡 Hint

Remember that ref is reactive and updates the template when its value changes.

The userName ref starts empty but is updated inside onMounted after the fetch completes. Vue re-renders the template to show 'Alice'.

📝 Syntax

intermediate

Which option correctly defines a Vue 3 API route handler using server routes?

In a Vue 3 project using server routes, you want to create an API endpoint that returns JSON with a message.

Which code snippet correctly exports the handler?

A export default async function() { return JSON.stringify({ message: 'Hello' }) }

B export function handler() { return { message: 'Hello' } }

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

D export default defineEventHandler(() => ({ message: 'Hello' }))

💡 Hint

Look for the official way to define event handlers in Vue server routes.

Option D uses defineEventHandler, the correct function to define server route handlers in Vue 3. Others either miss this or return wrong types.

🔧 Debug

advanced

Why does this Vue 3 server route handler cause a runtime error?

Examine this server route handler code:

export default defineEventHandler(async (event) => {
  const body = await useBody(event);
  return { greeting: `Hello, ${body.name}` };
});

When sending a POST request with JSON { "name": "Bob" }, the server crashes with TypeError: useBody is not a function. Why?

A The handler must not be async to use <code>useBody</code>.

B The <code>body</code> variable is undefined because the request has no body.

C The <code>useBody</code> function is not imported or available in this context.

D The event parameter is missing required properties for <code>useBody</code>.

💡 Hint

Check if all helper functions are imported or globally available.

useBody is a helper that must be imported from the server utilities. Without importing it, the function is undefined, causing the error.

❓ state_output

advanced

What is the final state of the Vue component after multiple API calls?

This Vue 3 component fetches a counter value from an API and increments it on button click:

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    async function fetchCount() {
      const res = await fetch('/api/counter');
      const data = await res.json();
      count.value = data.count;
    }
    async function increment() {
      await fetch('/api/counter/increment', { method: 'POST' });
      await fetchCount();
    }
    fetchCount();
    return { count, increment };
  }
}

If the initial API returns { count: 5 } and each increment increases the count by 1 on the server, what will count.value be after calling increment() twice?

Vue

<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>

A 7

B 6

C 8

D 5

💡 Hint

Each increment call updates the server count and then fetches the new value.

Starting at 5, each increment adds 1 on the server and fetchCount updates count.value. After two increments, count is 7.

🧠 Conceptual

expert

Which statement best describes the role of server routes in Vue 3 projects?

Choose the most accurate description of server routes in Vue 3 applications.

A Server routes handle backend logic and API responses, allowing separation from frontend code while sharing the same project.

B Server routes are used only for client-side routing and navigation between pages.

C Server routes automatically generate static HTML pages without any backend logic.

D Server routes replace Vue components and are used to build the entire UI.

💡 Hint

Think about the difference between frontend and backend responsibilities.

Server routes in Vue 3 projects provide backend API endpoints and logic, separate from frontend UI components but within the same project structure.