Введение в свой API в Nuxt

Сайт на Nuxt умеет не только отдавать HTML-страницы из app/pages. Тот же проект может отвечать на запросы с данными в формате JSON. Такие ответы удобны для списков, форм и любой логики, где браузер или другая программа ожидает не разметку, а структурированные данные.

Серверная часть проекта лежит в каталоге server. Внутри него папка api задаёт адреса, которые всегда начинаются с /api/. Имя и вложенность файлов в server/api напоминают файловый роутинг страниц: путь к файлу определяет, по какому URL клиент получит ответ.

Обработчик одного такого адреса - это JavaScript-файл с расширением .js. В нём экспортируют обработчик через defineEventHandler. Когда приходит запрос на подходящий URL, Nuxt выполняет этот код на сервере и отправляет клиенту результат.

Обратиться к API можно из браузера по полному адресу, например введя путь /api/posts в строку навигации при запущенном npm run dev. Тот же путь подойдёт для функции useFetch или функции $fetch на странице Vue: запрос уйдёт на сервер приложения, а не на внешний сайт.

Если обработчик возвращает массив или объект, Nuxt автоматически сериализует его в JSON и выставит подходящий тип содержимого. Отдельно описывать формат ответа в простых случаях не нужно: достаточно вернуть данные из функции обработчика.

Так мы получаем свой API в рамках одного Nuxt-проекта: страницы рисуют интерфейс, а каталог server/api хранит адреса с данными. Клиент может быть браузером, мобильным приложением или кодом на той же странице Vue - путь /api/ остаётся общим для всех таких обращений к серверу Nuxt.