Разработка на Vue и Nuxt — это мощно, но иногда рутина: стандартные компоненты, настройка SSR, работа со стором. А что, если часть этой работы можно переложить на AI? Правильно составленный промт превращает нейросеть в опытного наставника, который генерирует готовый код, объясняет тонкости и помогает избежать типичных ошибок. В этой статье — 12 проверенных промтов, которые ускорят вашу разработку: от создания компонентов с Composition API до оптимизации серверного рендеринга. Каждый промт сопровождается примером и пояснением, чтобы вы могли сразу применить его в работе.
1. Создание компонента с Composition API
Когда использовать: вам нужен новый компонент с логикой на Composition API, но хочется сразу получить хорошую структуру и типизацию.
Промт:
Создай компонент Vue 3 с использованием Composition API (script setup). Компонент должен: принимать пропс `title: string`, иметь кнопку, при клике на которую увеличивается счетчик, и выводить текущее значение счетчика. Используй `ref` и `computed`. Добавь стили scoped, сделай компонент переиспользуемым. Покажи полный код.
Пример использования: вы копируете промт в ChatGPT, Claude или другой AI-инструмент, подставляете свои требования, и получаете готовый компонент. Например, для карточки товара или виджета корзины.
Результат:
<template>
<div class="counter">
<h2>{{ title }}</h2>
<p>Счетчик: {{ count }}</p>
<button @click="increment">Увеличить</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const props = defineProps<{ title: string }>();
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
function increment() {
count.value++;
}
</script>
<style scoped>
.counter {
text-align: center;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
}
button {
padding: 10px 20px;
background: #42b883;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
Почему это работает: промт задает четкие требования, и AI генерирует код, соответствующий лучшим практикам Vue 3. Вы экономите время на написании boilerplate-кода.
2. Генерация composable для работы с API
Когда использовать: нужно вынести логику запросов к API в отдельный composable для переиспользования.
Промт:
Напиши composable для Vue 3 под названием `useFetchData`, который принимает URL и возвращает данные, состояние загрузки и ошибку. Используй `fetch` и `ref`. Добавь возможность повторного запроса через функцию `refresh`. Приведи пример использования в компоненте.
Пример использования: вы используете этот промт для создания универсального composable, который затем применяете в разных компонентах для получения данных с бэкенда.
Результат:
// composables/useFetchData.js
import { ref } from 'vue';
export function useFetchData(url) {
const data = ref(null);
const error = ref(null);
const isLoading = ref(false);
async function fetchData() {
isLoading.value = true;
error.value = null;
try {
const response = await fetch(url);
if (!response.ok) throw new Error('Network response was not ok');
data.value = await response.json();
} catch (e) {
error.value = e.message;
} finally {
isLoading.value = false;
}
}
fetchData(); // вызов при инициализации
return { data, error, isLoading, refresh: fetchData };
}
Почему это полезно: вы получаете готовый, типизированный composable, который легко поддерживать и тестировать.
3. Оптимизация рендеринга с v-memo и shallowRef
Когда использовать: производительность падает из-за излишнего рендеринга больших списков или сложных объектов.
Промт:
Объясни, как оптимизировать рендеринг в Vue 3 с помощью `v-memo` и `shallowRef`. Приведи пример: список из 1000 элементов, где каждый элемент — объект с полями `id` и `name`. Покажи, как использовать `v-memo` для предотвращения лишних обновлений, и как `shallowRef` помогает при работе с большими реактивными объектами.
Пример использования: вы задаете этот промт, чтобы понять, как применить оптимизации в конкретном проекте, и получаете готовые фрагменты кода.
Результат:
<template>
<ul>
<li v-for="item in items" :key="item.id" v-memo="[item.name]">
{{ item.name }}
</li>
</ul>
</template>
<script setup>
import { shallowRef } from 'vue';
const items = shallowRef([
{ id: 1, name: 'Item 1' },
// ... 1000 элементов
]);
</script>
Почему это работает: v-memo кэширует поддеревья, если зависимости не изменились, а shallowRef уменьшает затраты на глубокую реактивность. Это особенно важно для больших списков.
4. Настройка SSR в Nuxt 3
Когда использовать: нужно настроить серверный рендеринг для SEO и быстрой загрузки, но вы не знаете, с чего начать.
Промт:
Расскажи, как настроить SSR в Nuxt 3. Объясни, какие настройки в `nuxt.config.ts` нужны для включения SSR, как использовать `useAsyncData` для загрузки данных на сервере, и как избежать гидратации ошибок. Приведи пример страницы с получением данных с API.
Пример использования: вы используете промт при создании нового проекта Nuxt 3, чтобы правильно настроить SSR с самого начала.
Результат:
// nuxt.config.ts
export default defineNuxtConfig({
ssr: true,
// другие настройки
});
<!-- pages/index.vue -->
<script setup>
const { data: posts, error } = await useAsyncData('posts', () => $fetch('/api/posts'));
</script>
<template>
<div>
<h1>Посты</h1>
<div v-if="posts">
<div v-for="post in posts" :key="post.id">{{ post.title }}</div>
</div>
<p v-if="error">Ошибка загрузки</p>
</div>
</template>
Почему это полезно: промт дает базовое понимание SSR в Nuxt 3 и помогает избежать типичных ошибок, таких как использование window на сервере.
5. Работа с Pinia: стор с actions и getters
Когда использовать: нужно создать стор для управления глобальным состоянием (например, корзина или авторизация).
Промт:
Создай стор Pinia для управления списком задач. В сторе должны быть: state с массивом задач, getter для количества выполненных задач, action для добавления новой задачи и action для переключения статуса задачи. Используй Composition API стиль. Покажи код стора и пример использования в компоненте.
Пример использования: вы используете промт для создания типичного стора задач, который затем внедряете в приложение.
Результат:
// stores/todo.js
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
export const useTodoStore = defineStore('todo', () => {
const todos = ref([
{ id: 1, title: 'Купить молоко', done: false },
]);
const completedCount = computed(() => todos.value.filter(t => t.done).length);
function addTodo(title) {
todos.value.push({ id: Date.now(), title, done: false });
}
function toggleTodo(id) {
const todo = todos.value.find(t => t.id === id);
if (todo) todo.done = !todo.done;
}
return { todos, completedCount, addTodo, toggleTodo };
});
Почему это работает: вы получаете готовый стор с четкой структурой, что ускоряет разработку и уменьшает количество ошибок.
6. Маршрутизация с динамическими сегментами
Когда использовать: нужно настроить маршруты с параметрами, например, страница товара по id.
Промт:
Создай маршрут в Nuxt 3 для страницы товара по id. Покажи структуру папок в pages, как получить параметр id в компоненте, и как загрузить данные товара с помощью useAsyncData. Добавь обработку ошибок, если товар не найден.
Пример использования: вы создаете страницу товара в интернет-магазине, где URL вида /product/123.
Результат:
/pages/product/[id].vue
<script setup>
const route = useRoute();
const { data: product, error } = await useAsyncData('product', () => $fetch(`/api/products/${route.params.id}`));
if (error.value) {
throw createError({ statusCode: 404, statusMessage: 'Товар не найден' });
}
</script>
<template>
<div v-if="product">
<h1>{{ product.name }}</h1>
<p>{{ product.description }}</p>
</div>
</template>
Почему это важно: динамические маршруты — база для многих приложений, и этот промт помогает правильно реализовать их с учетом Nuxt 3 особенностей.
7. Тестирование компонентов с Vitest
Когда использовать: нужно написать unit-тесты для компонентов Vue.
Промт:
Напиши unit-тесты для компонента Vue 3 (script setup) с использованием Vitest и @vue/test-utils. Компонент имеет пропс `title` и кнопку, которая увеличивает счетчик. Проверь, что заголовок отображается, счетчик увеличивается при клике, и что событие emit срабатывает. Приведи полный код теста.
Пример использования: вы добавляете тесты в проект, чтобы избежать регрессий.
Результат:
import { mount } from '@vue/test-utils';
import { describe, it, expect } from 'vitest';
import Counter from './Counter.vue';
describe('Counter', () => {
it('renders title', () => {
const wrapper = mount(Counter, { props: { title: 'Hello' } });
expect(wrapper.find('h2').text()).toBe('Hello');
});
it('increments count on click', async () => {
const wrapper = mount(Counter, { props: { title: 'Test' } });
const button = wrapper.find('button');
await button.trigger('click');
expect(wrapper.find('.count').text()).toBe('1');
});
it('emits increment event', async () => {
const wrapper = mount(Counter, { props: { title: 'Test' } });
await wrapper.find('button').trigger('click');
expect(wrapper.emitted('increment')).toBeTruthy();
});
});
Почему это полезно: тесты повышают надежность кода, а промт помогает быстро написать их без изучения документации.
8. Миграция с Options API на Composition API
Когда использовать: есть старый компонент на Options API, который нужно переписать на современный стиль.
Промт:
Перепиши следующий компонент Vue с Options API на Composition API (script setup). Сохрани всю функциональность. Компонент: data с count, methods с increment, computed с doubleCount. Приведи код до и после.
Пример использования: вы вставляете в промт свой старый код и получаете новый.
Результат:
// До (Options API)
export default {
data() {
return { count: 0 };
},
methods: {
increment() {
this.count++;
},
},
computed: {
doubleCount() {
return this.count * 2;
},
},
};
<!-- После (Composition API) -->
<script setup>
import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
function increment() {
count.value++;
}
</script>
Почему это работает: промт автоматизирует рутинную миграцию и помогает изучить различия между подходами.
9. Оптимизация бандла и code splitting
Когда использовать: нужно уменьшить размер бандла и ускорить загрузку.
Промт:
Расскажи, как оптимизировать бандл в Nuxt 3. Опиши настройки в nuxt.config.ts для code splitting, использование динамических импортов, и как настроить анализ бандла с помощью nuxt/webpack-bundle-analyzer. Приведи примеры конфигурации.
Пример использования: вы применяете эти знания для ускорения загрузки своего приложения.
Результат:
// nuxt.config.ts
export default defineNuxtConfig({
build: {
analyze: true,
},
// другие настройки
});
<!-- Использование динамического импорта -->
<script setup>
const loadChart = () => import('~/components/Chart.vue');
</script>
Почему это важно: производительность — ключевой фактор для SEO и пользовательского опыта.
10. Работа с формами и валидацией
Когда использовать: нужно создать сложную форму с валидацией.
Промт:
Создай компонент формы в Vue 3 с полями: имя, email, сообщение. Добавь валидацию: имя обязательно, email должен быть корректным форматом, сообщение не менее 10 символов. Покажи ошибки под полями и disable кнопку отправки, пока форма невалидна. Используй Composition API.
Пример использования: вы создаете форму обратной связи и хотите избежать ручной валидации.
Результат:
<template>
<form @submit.prevent="submitForm">
<div>
<label>Имя</label>
<input v-model="name" />
<p v-if="errors.name">{{ errors.name }}</p>
</div>
<div>
<label>Email</label>
<input v-model="email" />
<p v-if="errors.email">{{ errors.email }}</p>
</div>
<div>
<label>Сообщение</label>
<textarea v-model="message"></textarea>
<p v-if="errors.message">{{ errors.message }}</p>
</div>
<button :disabled="!isValid">Отправить</button>
</form>
</template>
<script setup>
import { ref, computed } from 'vue';
const name = ref('');
const email = ref('');
const message = ref('');
const errors = ref({});
const isValid = computed(() => Object.keys(errors.value).length === 0);
function validate() {
errors.value = {};
if (!name.value.trim()) errors.value.name = 'Имя обязательно';
if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.value)) errors.value.email = 'Некорректный email';
if (message.value.trim().length < 10) errors.value.message = 'Сообщение должно быть не менее 10 символов';
}
function submitForm() {
validate();
if (isValid.value) {
// отправка
}
}
</script>
Почему это полезно: промт дает готовую структуру формы с валидацией, которую легко адаптировать.
11. Кастомные директивы
Когда использовать: нужно создать директиву, например, для клика вне элемента.
Промт:
Создай кастомную директиву `v-click-outside` для Vue 3. Директива должна вызывать переданную функцию, когда пользователь кликает вне элемента. Покажи, как зарегистрировать директиву глобально и использовать ее в компоненте.
Пример использования: вы добавляете закрытие модального окна по клику снаружи.
Результат:
// directives/clickOutside.js
export default {
mounted(el, binding) {
el.__clickOutsideHandler = (event) => {
if (!(el === event.target || el.contains(event.target))) {
binding.value(event);
}
};
document.addEventListener('click', el.__clickOutsideHandler);
},
unmounted(el) {
document.removeEventListener('click', el.__clickOutsideHandler);
},
};
<template>
<div v-click-outside="closeModal">
<p>Модальное окно</p>
</div>
</template>
<script setup>
function closeModal() {
// закрыть модалку
}
</script>
Почему это работает: директива переиспользуема, и промт помогает правильно реализовать жизненный цикл.
12. Генерация документации для компонентов
Когда использовать: нужно задокументировать компоненты для команды или автоматической генерации.
Промт:
Сгенерируй документацию для Vue-компонента. Опиши пропсы, события, слоты и методы. Используй формат JSDoc или VitePress. Приведи пример для компонента Counter с пропсом title и событием increment.
Пример использования: вы создаете документацию для библиотеки компонентов.
Результат:
# Counter
Компонент для отображения счетчика.
## Props
| Имя | Тип | Описание |
|------|--------|-------------------------|
| title| string | Заголовок счетчика |
## Events
| Имя | Параметры | Описание |
|-----------|-----------|-----------------------|
| increment | - | Срабатывает при клике |
## Example
```vue
<Counter title="Мой счетчик" @increment="handleIncrement" />
**Почему это полезно:** автоматизация документации экономит время и улучшает поддержку кода.
## 13. Отладка производительности с Vue DevTools
**Когда использовать:** нужно найти узкие места в производительности.
**Промт:**
Объясни, как использовать Vue DevTools для отладки производительности. Опиши вкладку Performance, как записать профиль, какие метрики смотреть (render, patch, re-render). Дай советы по оптимизации, если обнаружены частые ре-рендеры.
**Пример использования:** вы анализируете свое приложение и хотите улучшить отзывчивость.
**Результат:**
- Открыть Vue DevTools → Performance → Record.
- Выполнить действия в приложении.
- Остановить запись и изучить timeline.
- Искать компоненты с высокой частотой обновлений.
**Почему это важно:** без инструментов сложно понять, что именно тормозит.
## 14. Интеграция с TypeScript
**Когда использовать:** нужно типизировать пропсы и emits в компонентах.
**Промт:**
Перепиши компонент Vue 3 с добавлением TypeScript: определи интерфейс для пропсов и emits, используй defineProps и defineEmits с типами. Компонент: пропс title: string, emit update:title. Покажи полный код.
**Пример использования:** вы добавляете типизацию в существующий проект.
**Результат:**
```vue
<script setup lang="ts">
interface Props {
title: string;
}
interface Emits {
(e: 'update:title', value: string): void;
}
const props = defineProps<Props>();
const emit = defineEmits<Emits>();
</script>
Почему это работает: TypeScript улучшает надежность и читаемость кода.
15. Создание плагина для Nuxt
Когда использовать: нужно добавить глобальную функциональность, например, логирование или аналитику.
Промт:
Напиши плагин для Nuxt 3, который добавляет глобальный объект `$logger` с методами info, warn, error. Плагин должен использовать `provide` и быть доступен в компонентах и сторах. Покажи код плагина и пример использования.
Пример использования: вы создаете простую систему логирования для отладки.
Результат:
// plugins/logger.js
export default defineNuxtPlugin((nuxtApp) => {
const logger = {
info: (msg) => console.log(`[INFO] ${msg}`),
warn: (msg) => console.warn(`[WARN] ${msg}`),
error: (msg) => console.error(`[ERROR] ${msg}`),
};
nuxtApp.provide('logger', logger);
});
<script setup>
const { $logger } = useNuxtApp();
$logger.info('Компонент загружен');
</script>
Почему это полезно: плагины — мощный механизм расширения Nuxt.
16. Работа с асинхронными компонентами
Когда использовать: нужно лениво загружать большие компоненты.
Промт:
Покажи, как использовать `defineAsyncComponent` в Vue 3 для ленивой загрузки компонента. Приведи пример с загрузкой компонента из отдельного файла и добавь состояние загрузки и ошибки.
Пример использования: вы оптимизируете загрузку страницы, откладывая загрузку тяжелых виджетов.
Результат:
<script setup>
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent({
loader: () => import('./MyLargeComponent.vue'),
loadingComponent: { template: '<p>Загрузка...</p>' },
errorComponent: { template: '<p>Ошибка загрузки</p>' },
});
</script>
<template>
<AsyncComponent />
</template>
Почему это важно: это снижает начальный размер бандла и ускоряет загрузку.
17. Кастомные хуки в Nuxt
Когда использовать: нужно выполнить код при определенных жизненных циклах приложения.
Промт:
Создай кастомный хук в Nuxt 3, который будет выполняться при старте приложения и логировать время загрузки. Покажи, как использовать `app.vue` и хуки `app:created`, `app:beforeMount`, `app:mounted`.
Пример использования: вы хотите отслеживать производительность загрузки.
Результат:
<!-- app.vue -->
<script setup>
const startTime = Date.now();
useNuxtApp().hook('app:mounted', () => {
console.log(`Время загрузки: ${Date.now() - startTime}ms`);
});
</script>
Почему это работает: хуки позволяют интегрироваться в жизненный цикл Nuxt.
18. Сборка и деплой с PM2
Когда использовать: нужно развернуть Nuxt-приложение на сервере.
Промт:
Опиши процесс деплоя Nuxt 3 приложения на сервер с использованием PM2. Включи шаги: сборка, запуск в production режиме, настройка PM2 для автозапуска и мониторинга. Приведи команды и пример конфигурации ecosystem.config.js.
Пример использования: вы впервые деплоите Nuxt-приложение и хотите избежать ошибок.
Результат:
npm run build
pm2 start ecosystem.config.js
// ecosystem.config.js
module.exports = {
apps: [
{
name: 'my-nuxt-app',
script: './.output/server/index.mjs',
instances: 'max',
exec_mode: 'cluster',
env: {
NODE_ENV: 'production',
},
},
],
};
Почему это важно: правильный деплой — залог стабильной работы.
Заключение
Эти 18 промтов покрывают основные задачи разработчика на Vue и Nuxt: от создания компонентов до деплоя. Используйте их как отправную точку — адаптируйте под свои проекты, комбинируйте и улучшайте. Помните, что AI — это инструмент, который усиливает ваши навыки, но не заменяет понимания основ. Экспериментируйте, и вы увидите, как ускорится ваша разработка. Если у вас есть свои любимые промты — делитесь в комментариях, давайте вместе сделаем разработку на Vue еще эффективнее!
Комментарии