Ошибка запроса в Nuxt

Запрос может не выполниться: опечатка в адресе, недоступный хост или ответ с кодом ошибки. Функция useFetch не бросает исключение в шаблон, а кладёт сведения о сбое в error. Пока запрос успешен, это значение пустое; при провале там появляется объект с полем message.

Для наглядности возьмём заведомо неверный URL, чтобы ошибка была видна сразу. Выведем error.message, когда error задан. При сбое список не рисуется, и пользователь видит текст ошибки вместо пустой страницы:

<script setup>
	const { data, error } = await useFetch(
		'https://jsonplaceholder.typicode.invalid/orders',
	);
</script>
<template>
	<p v-if="error">
		{{ error.message }}
	</p>
	<ul v-else>
		<li
			v-for="order in data"
			:key="order.id"
		>
			{{ order.title }}
		</li>
	</ul>
</template>

Сделайте страницу /orders, которая при сбое запроса показывает короткий английский текст о неудачной загрузке.

Подберите осмысленный текст ошибки для пользователя, не дублируя техническое message дословно в интерфейсе.