Запрос со страницы в Nuxt

API в server/api часто нужен не только для прямого захода в браузере, а для страниц приложения. Страница запрашивает /api/... на том же хосте и строит разметку по полученному JSON.

Для такого запроса удобна функция useFetch. Она загружает данные при открытии страницы и даёт реактивный результат для шаблона.

Сначала зададим короткий обработчик списка постов:

export default defineEventHandler(() => {
	return [
		{ id: 1, title: 'First post' },
		{ id: 2, title: 'Second post' },
	];
});

На странице вызовем useFetch с путём /api/posts и выведем заголовки списком:

<script setup>
	const { data } = await useFetch('/api/posts');
</script>
<template>
	<ul>
		<li
			v-for="post in data"
			:key="post.id"
		>
			{{ post.title }}
		</li>
	</ul>
</template>

Адрес страницы задаёт файл app/pages/posts/index.vue. При открытии /posts Nuxt сначала получит JSON с сервера, затем отрисует список в браузере.

Сделайте API сотрудников и страницу, которая через useFetch выводит их имена.

На странице должны быть видны все сотрудники из вашего API, каждый в отдельном элементе списка.