12 промтов для Vue.js и Nuxt: компоненты, composables и роутинг

Vue.js и Nuxt — это мощный стек для современных веб-приложений. Но даже с этими инструментами разработчики тратят часы на рутину: прописывают пропсы, настраивают роуты, создают стор. AI-ассистенты вроде ChatGPT и GitHub Copilot могут взять на себя часть работы, если дать им точный промт. В этой статье — 12 промтов, которые я сам использую в проектах на Vue 3 и Nuxt. Они сэкономят время и помогут избежать типовых ошибок.

1. Генерация компонента по ТЗ

Промт: «Создай компонент Vue 3 с Composition API для карточки товара. Принимает props: product (object), isSelected (boolean). Использует v-model для выбора. Стили — scoped CSS с переменными. Добавь анимацию появления.»

Почему работает: Промт задаёт структуру, типы данных и стили, что снижает вероятность «мусорного» кода.

Пример использования: Вставляю такой промт в контекст проекта, где уже есть дизайн-система. В результате получаю готовый каркас, который остаётся адаптировать под реальное API.

Пример кода (сгенерированный результат):

<script setup lang="ts">
const props = defineProps<{
  product: { id: number; name: string; price: number; image?: string }
  isSelected?: boolean
}>()
const emit = defineEmits<{
  (e: 'update:isSelected', value: boolean): void
}>()
const toggle = () => emit('update:isSelected', !props.isSelected)
</script>

2. Создание composable для работы с API

Промт: «Напиши composable useFetchApi с кэшированием на 5 минут, отменой запросов через AbortController и поддержкой TypeScript generics. Используй глобальный fetch, но верни ref для data, error и loading.»

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

Пример использования: Я применяю его для всех API-запросов в проекте — единообразие и переиспользование.

Пример контракта composable:

const { data, error, loading, execute } = useFetchApi<Product[]>('/products')

3. Роутер с middleware в Nuxt

Промт: «Создай middleware auth для Nuxt 3: проверяет наличие токена в Pinia store, перенаправляет на /login, если токена нет. Обработай серверный и клиентский рендеринг.»

Почему работает: Nuxt middleware — сложная тема, промт задаёт конкретные требования и случаи. Это экономит часы поиска по документации.

Пример кода:

export default defineNuxtRouteMiddleware((to, from) => {
  const authStore = useAuthStore()
  if (!authStore.token && process.client) {
    return navigateTo('/login')
  }
  if (!authStore.token && process.server) {
    throw createError({ statusCode: 401, message: 'Unauthorized' })
  }
})

Подробнее о middleware — в официальной документации Nuxt.

4. Pinia store с actions и getters

Промт: «Создай Pinia store для корзины: state: items, total. Getters: count, totalPrice. Actions: addItem, removeItem, clear. Добавь persist через плагин pinia-plugin-persistedstate.»

Почему работает: Чётко перечислены необходимые поля и методы. AI понимает структуру и генерирует её без лишних деталей.

Пример кода:

export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] as CartItem[] }),
  getters: {
    count: (state) => state.items.reduce((n, item) => n + item.quantity, 0),
    totalPrice: (state) => state.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
  },
  actions: {
    addItem(product: Product) { /* реализация */ }
  },
  persist: true
})

Согласно документации Pinia, persist — стандартный плагин для сохранения состояния.

5. Оптимизация рендеринга списка

Промт: «Опиши, как правильно использовать v-memo и computed в Vue 3 для списка из 10 тысяч элементов. Приведи пример с key и условием мемоизации.»

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

Пример рекомендации:

<div v-for="item in items" :key="item.id" v-memo="[item.price, item.selected]">{{ item.name }}</div>

Важно: без злоупотребления v-memo, так как это может ухудшить производительность. Подробнее — в гайде по рендерингу.

6. Асинхронные компоненты и Suspense

Промт: «Напиши обработку ошибок для асинхронного компонента в Vue 3 с Suspense. Покажи, как отловить ошибку загрузки и показать fallback UI.»

Почему работает: Suspense — фича Vue 3, часто неправильно используемая. Промт требует конкретный сценарий, что снижает ошибки.

Пример кода:

<Suspense>
  <template #default>
    <AsyncComponent :post-id="id" />
  </template>
  <template #fallback>
    <LoadingSpinner />
  </template>
</Suspense>

При ошибке можно использовать onErrorCaptured или Error Boundary. По документации Vue.

7. Настройка SSG и ISR в Nuxt

Промт: «Настрой Nuxt для генерации статических страниц блога и инкрементальной регенерации для записей. Покажи конфигурацию routeRules для /blog и /blog/[slug].»

Почему работает: Nuxt 3 имеет мощный routeRules, но его настройка неинтуитивна. Промт даёт готовую конфигурацию.

Пример конфигурации:

export default defineNuxtConfig({
  routeRules: {
    '/blog': { swr: 3600 },
    '/blog/[slug]': { swr: 3600, prerender: false }
  }
})

По документации Nuxt, swr — аналог ISR.

8. TypeScript-типы из API

Промт: «Сгенерируй TypeScript-интерфейсы для JSON-ответа от /api/order. Используй строгие типы, enum для status, и optional для необязательных полей.»

Почему работает: AI умеет парсить JSON и создавать типы, но нужно задать правила (строгость, enum).

Пример промта с данными: «Создай интерфейс для данных: {"id": 1, "status": "pending"}» → на выходе:

interface Order {
  id: number

status: 'pending'

| 'paid' | 'cancelled'
userId?: number
}

9. Unit-тесты для компонентов

Промт: «Создай unit-тест для компонента Counter с Vue Test Utils и Vitest: проверь начальное значение, клик по кнопке и наличие props.»

Почему работает: Тесты — типичная задача, где AI генерирует шаблон, а вы адаптируете под свои нужды.

Пример кода:

import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'

test('renders initial count', () => {
  const wrapper = mount(Counter, { props: { initial: 5 } })
  expect(wrapper.text()).toContain('5')
})

10. Рефакторинг props drilling

Промт: «Переделай компонент с множеством props на provide/inject. Покажи пример для темы и локали. Объясни, когда это оправдано.»

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

Пример: В родителе:

provide('theme', theme)
provide('locale', locale)

В потомке:

const theme = inject<string>('theme')

Но злоупотреблять не стоит — для сложных состояний лучше Pinia.

11. Директива для анимации при скролле

Промт: «Создай кастомную директиву v-intersect в Vue 3, которая добавляет класс при появлении в viewport, используя IntersectionObserver.»

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

Пример:

app.directive('intersect', {
  mounted(el, binding) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) el.classList.add(binding.value || 'visible')
      })
    })
    observer.observe(el)
    el._observer = observer
  },
  unmounted(el) { el._observer?.disconnect() }
})

12. Code-splitting в Nuxt

Промт: «Настрой динамический импорт компонентов в Nuxt: отключи предзагрузку для админ-панели, используя lazy: false для нужных страниц.»

Почему работает: Nuxt автоматически разбивает код, но иногда нужно точечное управление. Промт уточняет цель.

Пример:

defineNuxtComponent({
  async asyncData() {
    const { default: Chart } = await import('chart.js')
    return { Chart }
  }
})

Заключение

Эти промты покрывают 80% моих ежедневных задач во Vue и Nuxt. Главное — быть конкретным: указывайте версию фреймворка, типы данных и ожидаемое поведение. Сохраняйте подборку в заметки и адаптируйте под свои проекты. Если у вас есть рабочие промты, которыми вы хотите поделиться — присылайте в комментарии.

Практика — лучший способ освоить промты. Начните с первого и постепенно внедряйте остальные. Удачной разработки!