Введение в формы в Nuxt

На многих сайтах пользователь заполняет поля: имя, email, текст заметки, адрес доставки. После нажатия кнопки отправки браузер не должен просто перезагрузить страницу с потерей введённого. В приложении на Vue мы собираем значения в коде страницы и отправляем их запросом на сервер.

Nuxt позволяет держать и интерфейс, и обработку данных в одном проекте. Страницы лежат в app/pages, а серверные маршруты API - в каталоге server/api. Файл вроде notes.post.js отвечает на POST-запрос по адресу /api/notes. Страница вызывает этот адрес, передаёт тело запроса, а обработчик читает его и возвращает ответ.

Такой разделение удобно: в браузере остаётся форма и реакция на ответ, а правила «что считать корректными данными» живут на сервере. Клиент может подсказать пользователю, но окончательное решение принимает API. Пустое обязательное поле, неверный формат или дубликат записи сервер отклонит и вернёт понятный статус и текст ошибки.

Для запросов к своему API в Nuxt обычно используют $fetch. Он уже знаком по работе с данными: тот же инструмент подходит и для POST из обработчика формы. Ответ может быть успешным - тогда страница показывает результат, переходит дальше или очищает поля. Если сервер вернул ошибку, страница может вывести сообщение рядом с формой, не ломая всё приложение.

Имеет смысл держать под рукой запущенный npm run dev и проверять форму в браузере после каждого изменения. Тогда видно и успешную отправку, и то, как сервер отвечает на некорректный ввод.