Ожидание отправки в Nuxt

Запрос к API занимает время. Пока ответ не пришёл, пользователь может нажать кнопку ещё раз и отправить дубликаты. Интерфейс должен показать, что сохранение идёт, и временно отключить кнопку.

Для этого заводят флаг в ref: перед $fetch ставят true, после завершения запроса - false в блоке finally, чтобы сброс сработал и при ошибке.

Серверная часть для заметки:

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 };
});

На странице свяжем флаг pending с атрибутом disabled у кнопки и сменим подпись на Saving на время запроса:

<script setup>
	const title = ref('');
	const pending = ref(false);
	
	async function submitForm() {
		pending.value = true;
		
		try {
			await $fetch('/api/notes', {
				method: 'POST',
				body: { title: title.value },
			});
		} finally {
			pending.value = false;
		}
	}
</script>
<template>
	<form @submit.prevent="submitForm">
		<input v-model="title" type="text">
		<button type="submit" :disabled="pending">
			{{ pending ? 'Saving' : 'Save' }}
		</button>
	</form>
</template>

Сделайте форму заказа, в которой кнопка отправки неактивна, пока выполняется запрос к API.

Покажите на кнопке текст Saving на время сохранения заказа.