Свой запрос в Nuxt

Функция useFetch принимает готовый адрес. Функция useAsyncData вместо URL получает функцию: Nuxt вызовет её на сервере, дождётся результата и положит его в data так же, как при загрузке по одному адресу.

Давайте разберём страницу /users. Обработчик внутри просто вызывает $fetch к тестовому API - снаружи это выглядит как свой запрос, а не строка URL в первом аргументе функции:

<script setup>
	const { data } = await useAsyncData(
		'users',
		() => $fetch(
			'https://jsonplaceholder.typicode.com/users',
		),
	);
</script>
<template>
	<p>
		Users
	</p>
</template>

Поле data - это ref с телом ответа. В setup к элементам массива обращаются через data.value, а в шаблоне ref разворачивается сам. Выведем имена списком:

<script setup>
	const { data } = await useAsyncData(
		'users',
		() => $fetch(
			'https://jsonplaceholder.typicode.com/users',
		),
	);
</script>
<template>
	<ul>
		<li
			v-for="user in data"
			:key="user.id"
		>
			{{ user.name }}
		</li>
	</ul>
</template>

Смысл приёма в том, что адрес и любые дополнительные шаги живут внутри обработчика. Завтра туда можно добавить второй $fetch или проверку ответа, не меняя форму вызова функции на странице.

Сделайте страницу /products, которая через функцию useAsyncData и обработчик загружает товары с тестового API и выводит их названия списком.

Сделайте страницу /staff, где обработчик запрашивает пользователей с JSONPlaceholder и в шаблоне показывается количество записей в заголовке Staff: N.