Значение по умолчанию в Nuxt

Пока обработчик useAsyncData ещё не вернул ответ, поле data может быть пустым. Если шаблон сразу перебирает массив в v-for, безопаснее задать стартовое значение, совпадающее с типом данных после загрузки.

Давайте изучим опцию default. Её передают функцией, которая возвращает начальный массив. До прихода JSON в data уже лежит пустой список, и цикл не ломается:

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

После завершения запроса default заменяется реальным массивом пользователей. На сервере список обычно уже заполнен в HTML; на клиенте тот же приём защищает разметку в короткий момент до гидратации или при повторном запросе.

Для объекта в default возвращают пустой объект или структуру с нулями. Главное, чтобы поля, к которым обращается шаблон, существовали с первого рендера.

Сделайте страницу /cities со списком городов из ответа API и опцией default, чтобы до загрузки data была пустым массивом.

Добавьте под списком на /cities строку Total: N, где N - длина массива в data; при пустом default на первом рендере должен показываться ноль.