Подготовка Nuxt 3 фронтенда к интеграции с реальным API

Что нужно сделать?
Добрый день! Есть крупный Nuxt 3/Vue 3/Composition API/Pinia/TS проект с полностью готовой FSD-архитектурой и UI-версткой.
Проблема сейчас проект функционирует на жестко вшитых mock-данных внутри Pinia stores и не имеет единого сетевого слоя.
Необходимо подготовить кодовую базу к бесшовной интеграции с бэкендом.
Задачи:
1) Разработка сетевого слоя (API Client). Создать централизованный инстанс $fetch или Axios с интерсепторами для:
- Прикрепления JWT-токенов авторизации;
- Логики Refresh Token;
- Глобальной обработки ошибок (редирект при 401, вызов toast-нотификаций при 500+).
2) Редизайн Mock-системы.
Изолировать все хардкоженные данные. Переписать логику сторов так, чтобы они обращались к API-клиенту. Переключение Mock / Реальный сервер должно работать через .env переменную.
3) Синхронизация контрактов (TypeScript DTOs). Привести типы данных фронтенда и моковые ответы к строгому формату (1:1), ожидаемому от REST/WebSocket API бэкенда (документацию/контракты предоставим). Убрать использование any там, где ожидаются данные с сервера.
4) Исправление SSR и Security edge-cases:
Убрать прямые вызовы localStorage без проверок, чтобы исключить падения Nuxt при Server-Side Rendering.
5) Настроить базовые Nuxt Route Middleware для защиты приватных страниц (Route Guards).
6) Расставить все скелетоны загрузки (есть примеры реализации в проекте, но сделаны не везде, подключить состояние загрузок/ошибок к реальному состоянию бека
Объём проекта около 110 Vue компонентов (15 разделов).

Цена: до 45 000 ₽

Перейти к заявке 👨‍💻

#верстка #фриланс