Отложенная загрузка в Nuxt

Иногда список или отчёт тянутся долго, а заголовок и меню уже должны быть на экране. Обычный вызов функциюа useFetch в setup может задержать появление страницы, пока JSON не вернётся. Опция lazy говорит Nuxt не ждать ответ перед первым рендером.

Давайте разберём страницу постов. Подключим useFetch с lazy: true и выведем флаг pending, пока данные в пути:

<script setup>
	const { data, pending } = useFetch(
		'https://jsonplaceholder.typicode.com/posts',
		{ lazy: true },
	);
</script>
<template>
	<h1>
		Posts
	</h1>
	<p v-if="pending">
		Loading...
	</p>
	<ul v-else>
		<li
			v-for="post in data"
			:key="post.id"
		>
			{{ post.title }}
		</li>
	</ul>
</template>

Сделайте страницу комментариев с отложенной загрузкой списка и подписью Loading..., пока запрос не завершился.

Сделайте страницу альбомов, где заголовок виден сразу, а обложки появляются после ответа API.