10 промтов для Vue 3 + Nuxt: от реактивности до SSR — ускоряем разработку с нейросетью

Промты для Vue 3 и Nuxt: 10 приёмов, которые ускорят фронтенд-разработку

Если вы пишете на Vue 3 или Nuxt, то знаете, как много времени уходит на рутину: настройка реактивности, обработка ошибок, оптимизация SSR. Но что, если часть этой работы можно делегировать нейросети? Я собрал 10 промтов, которые реально экономят часы работы. Они проверены на практике и помогут как новичкам, так и опытным разработчикам.

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

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

Решение: Попросите нейросеть сгенерировать компонент с учётом ваших требований.

Промт:

Создай компонент Vue 3 на Composition API. Компонент должен отображать список задач (todo list) с возможностью добавлять и удалять задачи. Используй ref для реактивных данных, computed для количества оставшихся задач и watch для сохранения списка в localStorage. Оформи код в стиле <script setup> и добавь минимальную стилизацию.

Пример использования: Вставьте этот промт в ChatGPT или Claude, и вы получите готовый компонент. Вот фрагмент того, что может сгенерировать нейросеть:

<template>
  <div>
    <h2>Todo List</h2>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="Новая задача" />
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.text }}
        <button @click="removeTask(task.id)">Удалить</button>
      </li>
    </ul>
    <p>Осталось: {{ remaining }}</p>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

const tasks = ref([]);
const newTask = ref('');

const remaining = computed(() => tasks.value.filter(t => !t.done).length);

function addTask() {
  if (newTask.value.trim()) {
    tasks.value.push({ id: Date.now(), text: newTask.value.trim(), done: false });
    newTask.value = '';
  }
}

function removeTask(id) {
  tasks.value = tasks.value.filter(t => t.id !== id);
}

watch(tasks, (newVal) => {
  localStorage.setItem('tasks', JSON.stringify(newVal));
}, { deep: true });
</script>

Результат: Экономия 10-15 минут на каждом компоненте, особенно если нужно быстро прототипировать.

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

Проблема: У вас есть старый код на Options API, который нужно перевести на современный Composition API.

Решение: Используйте промт для автоматического рефакторинга.

Промт:

Перепиши следующий компонент Vue 2 (Options API) на Composition API Vue 3. Используй <script setup>, замени data на ref/reactive, methods на обычные функции, computed на computed, watch на watch. Сохрани всю функциональность. Вот код: [вставьте код]

Пример: Допустим, у вас есть компонент с счётчиком на Options API. Нейросеть преобразует его в <script setup>, и вы получите более лаконичный и переиспользуемый код.

Результат: Ускорение рефакторинга legacy-кода в 2-3 раза, снижение риска ошибок при переносе.

3. Оптимизация реактивности с shallowRef и triggerRef

Проблема: Глубокая реактивность замедляет приложение при работе с большими массивами или объектами.

Решение: Применяйте shallowRef для некритичных данных и triggerRef для ручного обновления.

Промт:

Объясни, как использовать shallowRef и triggerRef в Vue 3 для оптимизации производительности. Приведи пример, где глубокое отслеживание не нужно, и как заменить ref на shallowRef. Также покажи, как правильно вызывать triggerRef после мутации свойства.

Пример: Нейросеть может сгенерировать такой код:

import { shallowRef, triggerRef } from 'vue';

const user = shallowRef({ name: 'Иван', age: 30 });

// Мутируем свойство напрямую
export function updateName(newName) {
  user.value.name = newName;
  triggerRef(user); // Принудительно обновляем
}

Результат: Повышение отзывчивости интерфейса при работе с большими данными, снижение нагрузки на память.

4. Генерация composable-функций для переиспользования логики

Проблема: Дублирование логики между компонентами.

Решение: Создавайте composable-функции с помощью нейросети.

Промт:

Напиши composable-функцию useFetch для Vue 3, которая принимает URL и возвращает data, error и isLoading. Используй ref и watchEffect. Обработай отмену запроса при размонтировании компонента. Добавь поддержку параметров запроса.

Пример: В результате вы получите переиспользуемый хук, который можно подключить в любом компоненте одной строкой.

Результат: Уменьшение дублирования кода, упрощение тестирования.

5. Отладка реактивности с watch и watchEffect

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

Решение: Используйте промт для генерации отладочного кода с watch.

Промт:

Напиши код на Vue 3, который логирует изменения реактивной переменной count с помощью watch. Покажи, как отслеживать глубокие изменения с { deep: true } и как использовать flush: 'post'. Добавь комментарии, объясняющие каждый параметр.

Пример: Нейросеть может выдать такой фрагмент:

watch(count, (newVal, oldVal) => {
  console.log(`count изменился: ${oldVal} -> ${newVal}`);
}, { deep: true, flush: 'post' });

Результат: Быстрое выявление проблем с реактивностью, экономия времени на дебаг.

6. Настройка SSR в Nuxt с useAsyncData и useFetch

Проблема: Некорректная работа SSR, данные не подгружаются на сервере.

Решение: Используйте промт для генерации правильного кода с Nuxt-композаблами.

Промт:

Напиши пример использования useAsyncData в Nuxt 3 для получения данных с API. Объясни, как передать параметры, как обработать ошибки и как обновить данные без перезагрузки страницы. Покажи, как использовать useFetch как альтернативу.

Пример: Нейросеть может сгенерировать такой код:

<script setup>
const { data, error, refresh } = await useAsyncData('posts', () => $fetch('/api/posts'));
</script>

Результат: Корректная работа SSR, улучшение SEO и скорости первой отрисовки.

7. Оптимизация SSR: гидратация и ClientOnly

Проблема: Интерактивные элементы не работают после гидратации или вызывают ошибки.

Решение: Используйте <ClientOnly> для компонентов, которые не должны рендериться на сервере.

Промт:

Объясни, что такое гидратация в Nuxt 3 и как использовать компонент <ClientOnly> для отложенной загрузки частей страницы. Приведи пример, когда это необходимо, и как настроить fallback.

Пример: Нейросеть может дать такой фрагмент:

<template>
  <ClientOnly fallback="Загрузка...">
    <ChatWidget />
  </ClientOnly>
</template>

Результат: Устранение проблем с гидратацией, снижение размера HTML.

8. Генерация миграции с Vue 2 на Vue 3

Проблема: Переход на Vue 3 требует изменений в коде.

Решение: Используйте промт для автоматизации миграции.

Промт:

Перечисли основные изменения при миграции с Vue 2 на Vue 3 (глобальный API, фрагменты, v-model и т.д.). Для каждого изменения приведи пример старого и нового кода. Дополнительно объясни, как использовать @vue/compat для постепенной миграции.

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

Результат: Структурированный план миграции, снижение риска пропустить важные изменения.

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

Проблема: Тестирование компонентов кажется сложным и отнимает много времени.

Решение: Генерируйте тесты с помощью нейросети.

Промт:

Напиши unit-тесты для компонента Vue 3 с помощью Vitest и Vue Test Utils. Компонент — кнопка счётчика, которая увеличивает значение при клике. Покрой сценарии: начальное состояние, клик, проверка emit события. Используй mount и shallowMount.

Пример: Нейросеть может сгенерировать тестовый файл, который сразу можно запустить.

Результат: Повышение качества кода, уверенность в изменениях.

10. Создание документации по компоненту

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

Решение: Поручите написание документации нейросети.

Промт:

Создай документацию для Vue-компонента [название]. Опиши его props, emits, слоты и примеры использования. Формат — Markdown, структура: описание, API, примеры, советы.

Пример: Вы получаете готовый раздел README, который можно добавить в проект.

Результат: Актуальная документация без лишних усилий, улучшение командной работы.

Выводы

Эти промты — не магия, а инструменты, которые реально экономят время. Я сам использую их в ежедневной работе и заметил, что скорость разработки выросла примерно на 30%. Попробуйте применить хотя бы пару из них — и вы почувствуете разницу. А если у вас есть свои любимые промты, поделитесь в комментариях!