Introduction
You're deep in a Vue or Nuxt project, and the clock is ticking. The component needs to be reactive, the SSR must be fast, and the Pinia store is acting up. Wouldn't it be great to have a senior developer by your side, ready to generate battle-tested code snippets at a moment's notice? That's exactly what these prompts can do. As a developer who relies on AI daily, I've curated a collection of 12 prompts that have saved me hours of debugging and boilerplate writing. Each prompt is paired with a real-world example and a brief explanation, so you can copy, adapt, and deploy them in your own projects.
The Prompts
1. Composition API Component Skeleton
The Prompt: "Generate a Vue 3 component using the Composition API. It should include a reactive counter, a computed property that doubles the counter, and a watcher that logs changes. Use <script setup> syntax."
Why it works: It provides a complete, best-practice component structure without you having to recall the exact syntax of ref, computed, and watch.
Example:
<template>
<div>
<p>Count: {{ count }}</p>
<p>Double: {{ doubleCount }}</p>
<button @click="count++">Increment</button>
</div>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
watch(count, (newVal) => console.log(`Count changed to ${newVal}`));
</script>
2. Pinia Store with Actions and Getters
The Prompt: "Create a Pinia store for a shopping cart. It should have state for items, a getter for the total price, and actions to add and remove items. Use the Composition API style for the store."
Why it works: Pinia's setup stores are more flexible and testable, and this prompt gives you a clean, production-ready pattern.
Example:
// stores/cart.js
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
export const useCartStore = defineStore('cart', () => {
const items = ref([]);
const totalPrice = computed(() => items.value.reduce((sum, item) => sum + item.price, 0));
function addItem(item) { items.value.push(item); }
function removeItem(id) { items.value = items.value.filter(item => item.id !== id); }
return { items, totalPrice, addItem, removeItem };
});
3. Optimizing Re-renders with v-memo
The Prompt: "Explain how to use v-memo to optimize a list rendering in Vue 3. Provide an example where only the changed item is re-rendered, not the whole list."
Why it works: v-memo is a powerful but underused directive; this prompt clarifies when to use it and provides a working example.
Example:
<template>
<div v-for="item in items" :key="item.id" v-memo="[item.id, item.updated]">
{{ item.name }} - {{ item.updated }}
</div>
</template>
4. Nuxt 3 Dynamic Route with useFetch
The Prompt: "Create a Nuxt 3 page component for a blog post. The route is dynamic (/posts/:id). Fetch the post data using useFetch and handle loading and error states."
Why it works: It demonstrates best practices for data fetching in Nuxt, including error handling, which is often overlooked.
Example (in pages/posts/[id].vue):
<template>
<div v-if="pending">Loading...</div>
<div v-else-if="error">Error: {{ error.message }}</div>
<article v-else>{{ post.title }}</article>
</template>
<script setup>
const { id } = useRoute().params;
const { data: post, pending, error } = await useFetch(`/api/posts/${id}`);
</script>
5. SEO Meta Tags in Nuxt 3
The Prompt: "Generate a useHead composition for a Nuxt 3 page that sets the title, meta description, and Open Graph tags. Include a fallback for when the data is not yet loaded."
Why it works: SEO is critical for any public-facing site, and this prompt ensures you implement it correctly.
Example:
useHead({
title: () => post.value ? post.value.title : 'Default Title',
meta: [
{ name: 'description', content: () => post.value ? post.value.excerpt : 'Default description' },
{ property: 'og:title', content: () => post.value ? post.value.title : 'Default OG Title' }
]
});
6. SSR-Friendly Code with process.server
The Prompt: "Write a composable that runs only on the client side in Nuxt 3. Use process.server to check the environment and avoid SSR issues, for example, accessing window."
Why it works: This is a common pain point in Nuxt; the prompt provides a safe pattern.
Example:
// composables/useClientOnly.js
export function useClientOnly() {
if (process.server) return null;
return window.innerWidth;
}
7. Vue Router Navigation Guards
The Prompt: "Implement a global beforeEach guard in Vue Router that checks if the user is authenticated. If not, redirect to the /login page. Show how to define the guard in the router configuration."
Why it works: Authentication is a common requirement; this gives a clean, reusable pattern.
Example:
// router/index.js
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('auth');
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});
8. Unit Testing Vue Components with Vitest
The Prompt: "Write a Vitest test for a Vue component. The component has a button that increments a counter. Test that the counter updates and the button click event is emitted."
Why it works: It gives a concrete example of testing with Vitest and Testing Library, which is the modern approach.
Example:
import { mount } from '@vue/test-utils';
import Counter from './Counter.vue';
test('increments counter', async () => {
const wrapper = mount(Counter);
await wrapper.find('button').trigger('click');
expect(wrapper.find('.count').text()).toBe('1');
});
9. Lazy Loading Components
The Prompt: "Show how to lazy load a Vue component in a Nuxt 3 app using the Lazy prefix. Explain the benefit for performance."
Why it works: Lazy loading is a key performance optimization, and Nuxt makes it easy.
Example:
<template>
<LazyHeavyComponent />
</template>
10. Error Handling in Nuxt with createError
The Prompt: "Create a Nuxt 3 server API route that throws a 404 error using createError when an item is not found. Show how to handle this error on the client side."
Why it works: Proper error handling is essential; this prompt demonstrates the Nuxt-specific way.
Example (in server/api/items/[id].js):
export default defineEventHandler((event) => {
const id = getRouterParam(event, 'id');
const item = db.find(i => i.id === id);
if (!item) throw createError({ statusCode: 404, message: 'Item not found' });
return item;
});
11. Custom Vue Directive
The Prompt: "Create a custom Vue directive v-focus that automatically focuses an input when the component is mounted. Show how to register it globally in a Vue 3 app."
Why it works: Custom directives are a powerful feature; this example is simple but demonstrates the pattern.
Example:
// main.js
app.directive('focus', {
mounted(el) { el.focus(); }
});
12. Nuxt Plugins for Global Utilities
The Prompt: "Create a Nuxt 3 plugin that injects a global helper function formatDate to format dates. Show how to use it in a component."
Why it works: Plugins are the standard way to share utilities across your Nuxt app.
Example (in plugins/date.js):
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.provide('formatDate', (date) => new Intl.DateTimeFormat('en-US').format(date));
});
Then in a component: const { $formatDate } = useNuxtApp();
Conclusion
These 12 prompts are my go-to toolkit for Vue and Nuxt development. They've streamlined my workflow, reduced boilerplate, and helped me avoid common pitfalls. The key is to treat them as starting points — adapt them to your specific project needs, and you'll see a significant boost in productivity. Start using them today, and you'll wonder how you ever coded without them. For more insights and advanced techniques, stay tuned to the ASI Biont blog, where we explore the intersection of AI and modern web development.
Comments