Состояние загрузки в Nuxt

Сетевой запрос занимает время. Пока ответ не пришёл, список на странице пуст, и непонятно, идёт ли загрузка или данных просто нет. Функция useFetch вместе с data возвращает флаг pending: он истинен, пока запрос выполняется.

Давайте познакомимся со страницей отделов. Подключим pending и в шаблоне покажем строку Loading, пока флаг активен, а затем список из data. После ответа API pending становится ложным:

<script setup>
	const { data, pending } = await useFetch(
		'https://jsonplaceholder.typicode.com/users',
	);
</script>
<template>
	<p v-if="pending">
		Loading
	</p>
	<ul v-else>
		<li
			v-for="user in data"
			:key="user.id"
		>
			{{ user.name }}
		</li>
	</ul>
</template>

Сделайте страницу /departments со списком отделов с API и строкой Loading на время загрузки.

Настройте вывод так, чтобы при ошибке сети список не показывался как пустой каталог без пояснения.