Vue и Nuxt на автопилоте: 10 проверенных промтов, которые заменят половину рутины

Разработка на Vue и Nuxt — это бесконечный поток повторяющихся задач: написать компонент, настроить стор, оптимизировать рендеринг, разобраться с SSR. Руками это делать долго, а нейросети часто выдают код, который надо переписывать. Я каждый день работаю с AI и отобрал 10 промтов, которые реально экономят часы. Они проверены в бою: от генерации компонентов с TypeScript до отладки гидратации в Nuxt. Ниже — каждый с примером и разбором, как его применить.

1. Генерация компонента по спецификации

Промт: «Создай компонент Vue 3 на Composition API с TypeScript. Он принимает пропсы items: Array<{id: string; title: string}>. Эмитит событие select с payload id. Рендерит список с кнопками. Добавь стили scoped. Учти состояние загрузки и пустой список.»

Пример: я вставил этот промт в ChatGPT, указав нужные типы. Получил рабочий компонент с v-loading, fallback-сообщением и emit. Пришлось поправить пару строк стилей, но структура и логика были готовы за минуту. Без промта я бы потратил 15–20 минут на каркас.

Почему работает: промт задаёт контекст (Vue 3, Composition API), требования к пропсам и событиям, а также пограничные состояния. Это исключает «пустые» ответы и код, который не вписывается в проект.

2. Рефакторинг Options API в Composition API

Промт: «Перепиши этот компонент с Options API на Composition API с script setup. Сохрани всю логику, включая watch, computed и методы. Используй типизацию через defineProps и defineEmits. Вот код: [вставка]»

Пример: я мигрировал легаси-компонент с data, methods и watch. Нейросеть превратила его в аккуратный script setup, заменив this на переменные, а watch — на watchEffect. Ошибок не было, только пара мелких правок в импортах.

Почему работает: рефакторинг — это механическая работа, которая отнимает время. Промт даёт чёткие инструкции и контекст, поэтому AI делает всё сам.

3. Оптимизация производительности рендеринга

Промт: «Проанализируй производительность этого компонента Vue 3. Найди проблемы: лишние рендеры, тяжёлые вычисления в шаблоне, отсутствие key. Предложи исправления с v-memo, computed, shallowRef или другими оптимизациями. Код: [вставка]»

Пример: у меня был список с фильтрацией, который тормозил. Нейросеть указала на вычисление в шаблоне и предложила вынести в computed, добавить key и использовать v-memo для списка. После правок интерфейс стал отзывчивее.

Почему работает: промт направляет AI на поиск конкретных паттернов, а не даёт общие советы. Это ускоряет профайлинг и помогает найти то, что вы могли упустить.

4. Настройка Pinia store с persist

Промт: «Создай store Pinia для корзины. Состояние: items: CartItem[], totalPrice. Геттер totalPrice считает сумму. Действия: addItem, removeItem, clear. Подключи плагин pinia-plugin-persistedstate для сохранения в localStorage. Используй setup-синтаксис. Вот типы CartItem: [вставка]»

Пример: для интернет-магазина я сгенерировал такой стор за один запрос. AI учёл плагин, добавил persist: true и типизацию. Осталось только установить пакет и подключить плагин в main.js.

Почему работает: промт даёт полное ТЗ: структура, геттеры, действия, плагин. Меньше итераций — быстрее результат.

5. Написание unit-тестов для компонента

Промт: «Напиши unit-тесты для этого компонента Vue 3 с Vitest и Vue Test Utils. Проверь: рендер пропсов, работу emit, отображение состояния загрузки и пустого списка. Используй describe/it/expect. Код: [вставка]»

Пример: я вставил компонент списка с эмитом. Нейросеть сгенерировала тесты, которые проверяют, что кнопки рендерятся, клик вызывает emit, а при отсутствии данных показывается заглушка. Тесты прошли с первого раза.

Почему работает: тесты — это шаблонная работа. Промт задаёт структуру и кейсы, которые нужно покрыть, поэтому AI пишет их быстро и точно.

6. Отладка проблемы гидратации в Nuxt

Промт: «У меня ошибка гидратации в Nuxt: текст на сервере и клиенте отличается. Вот код страницы: [вставка]. Найди причину и предложи решение: ClientOnly, useHydration или другие паттерны.»

Пример: я столкнулся с миганием даты из-за разных часовых поясов. AI объяснил, что new Date() на сервере и клиенте даёт разные значения, и предложил обернуть в . Проблема ушла.

Почему работает: промт указывает на конкретную ошибку и просит решение. AI знает типовые причины гидратации и сразу даёт рабочие варианты.

7. Генерация composable для работы с API

Промт: «Создай composable useApi для Nuxt 3. Он должен использовать $fetch, поддерживать параметры запроса, возвращать данные, ошибку и состояние загрузки. Добавь обработку ошибок и типизацию через generics. Пример использования: const { data, error, loading } = await useApi('/users').»

Пример: я сгенерировал такой composable для проекта. AI учёл SSR, добавил использование useAsyncData для избежания двойных запросов. Код получился чистым и переиспользуемым.

Почему работает: composable — это абстракция, которую легко описать словами. Промт даёт все детали, и AI возвращает готовую функцию.

8. Написание catch-all route и middleware

Промт: «Создай middleware в Nuxt для проверки авторизации. Если пользователь не залогинен (useCookie('token') отсутствует), редирект на /login. Примени его к страницам /dashboard и /profile. Также создай catch-all route для 404.»

Пример: для админки я попросил AI сгенерировать middleware. Он вернул файл auth.ts с defineNuxtRouteMiddleware и функцией navigateTo. Я просто подключил его в pages. Экономия — 10 минут.

Почему работает: промт описывает бизнес-логику, а AI превращает её в код с учётом API Nuxt.

9. Оптимизация бандла с route-level code splitting

Промт: «Проанализируй этот nuxt.config.ts. Предложи оптимизации: включи experimental.componentIslands, настрой routeRules для кеширования, включи оптимизацию бандла. Объясни, что делает каждая опция.»

Пример: я показал конфиг с большим бандлом. AI предложил добавить routeRules для статических страниц и включить componentIslands. После изменений размер бандла уменьшился.

Почему работает: промт просит объяснения, поэтому AI не просто выдаёт код, а помогает понять, что он делает. Это повышает ваш уровень.

10. Генерация документации и комментариев

Промт: «Напиши JSDoc-комментарии для этого composable: опиши параметры, возвращаемое значение и пример использования. Добавь комментарии в сложных местах. Код: [вставка]»

Пример: я попросил AI документировать useApi. Он добавил JSDoc с типами и описанием, что улучшило читаемость. Теперь другие разработчики быстрее понимают код.

Почему работает: документация — это рутина, которую AI делает хорошо. Промт задаёт формат, и вы получаете аккуратные комментарии.

11. Перевод кода в TypeScript с нуля

Промт: «Перепиши этот JavaScript-файл на TypeScript. Добавь интерфейсы для всех объектов, типизируй функции и переменные. Используй строгий режим. Код: [вставка]»

Пример: я переводил утилиты на TS. AI добавил интерфейсы, типы возвращаемых значений и исправил неявные any. Это заняло меньше времени, чем вручную.

Почему работает: промт просит строгую типизацию, и AI следует best practices.

12. Создание адаптивного layout с Tailwind

Промт: «Создай компонент карточки товара с Tailwind CSS. Адаптивность: 1 колонка на мобильных, 3 на десктопе. Добавь hover-эффекты и изображение. Используй NuxtImg для оптимизации.»

Пример: я сгенерировал карточку для каталога. AI использовал grid-cols-1 md:grid-cols-3, добавил hover:scale-105 и тег . Осталось вставить данные.

Почему работает: промт описывает UI-требования, и AI генерирует разметку с нужными классами.

Как выжать максимум из промтов

• Уточняйте версии: указывайте Vue 3.4, Nuxt 3.12 — это влияет на синтаксис.
• Давайте контекст: вставляйте код, ссылки на документацию, требования к стилю.
• Итерируйте: если ответ не идеален, уточните детали: «сделай через defineAsyncComponent» или «используй fetch вместо axios».

Эти промты — не магия, а инструменты. Они ускоряют рутину, но не заменяют понимания Vue и Nuxt. Используйте их как ускоритель, а не как костыль. Попробуйте прямо сейчас — возьмите один из своих компонентов и скормите его нейросети. Через месяц вы заметите, что пишете код в два раза быстрее.