Введение
Vue.js и Nuxt — одни из самых популярных фреймворков для создания современных веб-приложений. Однако даже опытные разработчики часто тратят часы на написание шаблонного кода: компонентов, composables, роутинга и store. В 2026 году, когда темпы разработки ускорились, а сложность проектов выросла, использование AI-промтов стало не просто удобством, а необходимостью. В этой статье я собрал 7 проверенных промтов, которые помогут вам сгенерировать качественный код для Vue 3 и Nuxt 3 (с Composition API). Каждый промт сопровождается пояснением, примером использования и ссылками на официальную документацию. Вы сможете скопировать их и сразу применить в своих проектах.
1. Промт для создания компонента с пропсами и слотами
Задача: Быстро сгенерировать компонент с типизированными пропсами (TypeScript), слотами и emit-событиями.
Промт:
Напиши на Vue 3 Composition API (с TypeScript) компонент для карточки пользователя. Компонент должен:
- Принимать пропсы: name (string), email (string), avatarUrl (string, опционально), status ('online'
| 'offline' | 'busy').
- Иметь слот для дополнительного контента (например, кнопок действий).
- Эмитить событие 'click' с объектом { userId: number }.
- Использовать scoped styles.
- Выводить аватар (если передан), имя, email и статус в виде цветного индикатора.
Пояснение: Промт чётко задаёт структуру — типы пропсов, слоты, события. Это универсальный шаблон для любых карточек: товаров, профилей, сообщений.
Пример использования: Вы вставляете промт в ChatGPT, Claude или Gemini, получаете код. Затем адаптируете под свой проект.
2. Промт для написания composable с реактивным состоянием
Задача: Создать переиспользуемый composable для управления состоянием модального окна (открыть/закрыть, передать данные).
Промт:
Напиши на Vue 3 Composition API composable useModal, который:
- Использует ref для isOpen (boolean).
- Использует ref для modalData (тип T — generic).
- Возвращает методы open(data?: T), close(), toggle().
- При открытии сохраняет переданные данные.
- При закрытии очищает modalData.
- Добавь JSDoc комментарии к каждому методу.
Пояснение: Composables — основа переиспользования логики в Vue 3. Этот промт генерирует готовый шаблон, который можно расширить под любые сценарии (формы, подтверждения, загрузка).
Пример использования: Вы используете этот composable в любом компоненте: const { isOpen, open, close } = useModal().
3. Промт для динамического роутинга в Nuxt 3
Задача: Создать страницу с динамическими параметрами и middleware для проверки авторизации.
Промт:
Создай страницу в Nuxt 3 (pages/users/[id].vue), которая:
- Получает параметр id из роута (useRoute()).
- Использует asyncData или useFetch для получения данных пользователя по API (GET /api/users/:id).
- Отображает загрузку (loading state) и ошибку (error state).
- Добавь middleware auth, который проверяет наличие токена в cookie, и если нет — редиректит на /login.
- Используй TypeScript.
Пояснение: Nuxt 3 использует файловую систему для роутинга. Промт охватывает типичную задачу — динамическая страница с защитой.
Пример использования: Этот код можно сразу поместить в папку pages, и Nuxt автоматически создаст маршрут /users/:id.
4. Промт для Pinia store с actions и getters
Задача: Написать store для корзины товаров (Cart) с добавлением, удалением и подсчётом суммы.
Промт:
Напиши на Pinia (Vue 3, Composition API) store для корзины ('cart'):
- State: items (массив объектов { id: number, name: string, price: number, quantity: number }).
- Getter: totalPrice (сумма price * quantity всех items).
- Getter: itemCount (общее количество товаров).
- Action: addItem(item) — добавляет товар или увеличивает quantity, если уже есть.
- Action: removeItem(id) — удаляет товар по id.
- Action: clearCart().
- Используй TypeScript.
Пояснение: Pinia — официальный state-менеджер для Vue 3. Промт даёт готовую структуру store с типизацией.
Пример использования: В компоненте: const store = useCartStore(); store.addItem({ id: 1, name: 'Phone', price: 500, quantity: 1 });.
5. Промт для обработки форм с валидацией
Задача: Создать компонент формы логина с валидацией полей (email, password) и отображением ошибок.
Промт:
Напиши на Vue 3 Composition API компонент LoginForm с:
- Поля: email (email), password (password).
- Валидация: email — обязательное и формат email, password — минимум 6 символов.
- Отображение ошибок под каждым полем (красный текст).
- Состояние загрузки при отправке.
- При успешной отправке — emit события 'success' с данными формы.
- Используй v-model для двустороннего связывания.
- Scoped styles.
Пояснение: Формы — одна из самых частых задач. Промт покрывает валидацию, состояния и обработку ошибок.
Пример использования: Подходит для любых форм — регистрация, обратная связь, оформление заказа.
6. Промт для написания тестов (Vitest) компонента
Задача: Написать unit-тест для проверки отображения и событий компонента.
Промт:
Напиши на Vitest (с @vue/test-utils) тест для компонента UserCard (из примера 1). Тест должен:
- Рендерить компонент с пропсами: name='John', email='john@test.com', status='online'.
- Проверить, что имя отображается в DOM.
- Проверить, что индикатор статуса имеет правильный CSS класс (online).
- Симулировать клик по карточке и проверить, что emit 'click' содержит объект с userId.
- Использовать describe/it.
Пояснение: Тестирование — обязательная часть профессиональной разработки. Vitest — стандарт для Vue 3.
Пример использования: Добавляете тест в папку __tests__, запускаете npx vitest.
7. Промт для генерации API-клиента с axios
Задача: Создать сервис для работы с REST API (CRUD) с обработкой ошибок.
Промт:
Создай на TypeScript сервис apiClient на основе axios с:
- Базовым URL (import.meta.env.VITE_API_URL).
- Интерцептором для добавления Bearer token из localStorage.
- Интерцептором для обработки ошибок: если 401 — очистить токен и редирект на /login.
- Методы: get<T>(url), post<T>(url, data), put<T>(url, data), delete<T>(url).
- Каждый метод возвращает Promise с типом T.
Пояснение: Универсальный клиент для любого API. Используется в composables и store.
Пример использования: const data = await apiClient.get<User[]>('/users');.
Заключение
Эти 7 промтов покрывают 80% повседневных задач Vue.js и Nuxt разработчика: от компонентов до тестов. Главное — не копируйте слепо, а адаптируйте под свои требования. В 2026 году AI-инструменты стали незаменимыми помощниками, но финальное качество кода всегда остаётся за вами. Если вы хотите глубже изучить интеграцию AI в разработку, обратите внимание на современные платформы, которые предлагают готовые шаблоны и курсы. Например, ASI Biont поддерживает подключение к Vue.js и Nuxt через API — подробнее на asibiont.com/courses. Используйте эти промты как стартовую точку и ускоряйте свою разработку!
Комментарии