Сообщение об ошибке в Nuxt

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

Обработчик заметок с проверкой заголовка выглядит так:

export default defineEventHandler(async (event) => {
	const body = await readBody(event);
	const title = body.title?.trim();
	
	if (!title) {
		setResponseStatus(event, 400);
		return { message: 'Title is required' };
	}
	
	return { title };
});

На странице заведём ref для текста ошибки. Отправку обернём в try и catch: при успехе очистим сообщение, при сбое прочитаем data.message из объекта ошибки и покажем его в шаблоне:

<script setup>
	const title = ref('');
	const errorMessage = ref('');
	
	async function submitForm() {
		errorMessage.value = '';
		
		try {
			await $fetch('/api/notes', {
				method: 'POST',
				body: { title: title.value },
			});
		} catch (error) {
			errorMessage.value = error.data?.message ?? 'Save failed';
		}
	}
</script>
<template>
	<form @submit.prevent="submitForm">
		<input v-model="title" type="text">
		<button type="submit">
			Save
		</button>
		<p v-if="errorMessage">
			{{ errorMessage }}
		</p>
	</form>
</template>

При пустом заголовке под формой появится фраза Title is required. При корректном вводе абзац с ошибкой скрыт.

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

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