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>?
<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>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'.
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?
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.
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?
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.
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?
<template>
<div>{{ count }}</div>
<button @click="increment">Increment</button>
</template>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.
Choose the most accurate description of server routes in Vue 3 applications.
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.