Introduction
Vue.js and Nuxt are among the most popular frameworks for building modern web applications. As a developer, you likely spend a significant portion of your day writing components, composables, and store logic. With the rise of AI-assisted coding, crafting the right prompts can dramatically speed up your workflow. This article collects 15 battle-tested prompts that I actually use in my daily work with Vue 3 and Nuxt 3. Each prompt is accompanied by a real usage example, so you can see exactly how to apply it. No fluff, no theory — just practical, copy-paste-ready prompts that will help you generate Vue components, composables, routes, and Pinia stores faster.
Why Prompts Matter for Vue.js Developers
When you work with AI, the quality of your output depends heavily on the precision of your input. A vague prompt like "create a component" will give you generic code that you then have to rewrite. A well-structured prompt that specifies the component's purpose, props, emits, and styling conventions will produce production-ready code in seconds. Over the past year, I've refined my prompts to include explicit instructions about Vue 3's Composition API, TypeScript, Nuxt's auto-imports, and Pinia best practices. The result? I can generate a fully typed component with unit tests in under a minute.
Prompt Collection
1. Generate a Vue 3 Component with Props and Emits
Prompt:
Create a Vue 3 component using Composition API (script setup) with TypeScript. The component is a user profile card that receives 'user' (object with id, name, email, avatarUrl) as a prop and emits 'edit' and 'delete' events. Include a slot for custom actions. Style with scoped CSS using a modern card layout.
Usage example: I used this prompt to quickly scaffold a reusable user profile card for a dashboard. The AI generated the entire <script setup> block with proper defineProps and defineEmits typing, plus a visually clean card with avatar, name, and action buttons. I just copied it into my UserProfileCard.vue file and adjusted the CSS variables.
2. Create a Composable for API Data Fetching
Prompt:
Generate a Vue 3 composable called 'useApiFetch' that wraps fetch with loading, error, and data states. It should accept a URL string and optional fetch options. Return reactive refs for data, loading, and error. Use TypeScript generics to type the response data. Include an abort controller for cancellation.
Usage example: I needed a consistent way to fetch data across my Nuxt app. I pasted this prompt, and the AI returned a composable with ref() for loading, shallowRef for data, and proper error handling. It even added an abort() method. I saved it under composables/useApiFetch.ts and Nuxt auto-imported it everywhere.
3. Build a Pinia Store for User Authentication
Prompt:
Write a Pinia store using the setup syntax (defineStore with function). The store should manage user authentication state: user (null or object with id, email, name), isAuthenticated (computed), and token (string). Actions: login(email, password) that calls an API endpoint, logout() that clears state, and checkAuth() that validates the token from localStorage. Use TypeScript interfaces.
Usage example: For a new project, I needed a solid auth store. The AI generated a complete store with state(), getters, and actions. It included a login action that uses $http (I had to replace with my own API call) and a logout that clears both state and localStorage. The checkAuth action was especially useful for app initialization.
4. Generate a Nuxt 3 Page with Dynamic Route Params
Prompt:
Create a Nuxt 3 page component for a blog post. The route is '/posts/[id]'. Use definePageMeta to set the page title and layout. Fetch the post data using useFetch with the route param 'id'. Display the post title, author, date, and content. Handle loading and error states with v-if. Use a skeleton loader for loading.
Usage example: I was building a blog and needed a single post page. The prompt gave me a fully functional page with definePageMeta, useRoute(), and useFetch. It included a nice skeleton loader from a CSS library. I just had to adjust the API endpoint.
5. Create a Reusable Form Component with Validation
Prompt:
Generate a Vue 3 component 'AppForm' that accepts an array of field definitions (each with name, label, type, rules). Use v-model for each field. Integrate a simple validation system that highlights invalid fields and shows error messages. Emit 'submit' with the form data. Use a submit button slot. Style with scoped CSS.
Usage example: I had multiple forms across my app — login, registration, profile edit. Instead of writing each form manually, I used this prompt to create a dynamic form component. I passed different field arrays, and it rendered inputs with validation. The AI generated a clean validate() function that checks each field's rules.
6. Write a Nuxt Middleware for Route Protection
Prompt:
Create a Nuxt 3 middleware file 'auth.ts' that checks if the user is authenticated by reading a token from localStorage. If no token exists, redirect to '/login'. Use the useAuthStore (Pinia) to verify the token. Return navigateTo for redirect. Add a check for public routes that should bypass the middleware.
Usage example: I needed to protect several dashboard routes. The AI generated a middleware file with a list of public paths (like /login, /register) and a check that uses the auth store. It even added a try/catch for token validation. I placed it in middleware/auth.ts and applied it globally via nuxt.config.ts.
7. Generate a Composable for Debounced Input
Prompt:
Write a Vue 3 composable 'useDebounce' that takes a ref and a delay (default 300ms). It returns a debounced ref that updates only after the delay. Use watch and setTimeout. Include cleanup on unmount. Type the ref generically.
Usage example: I had a search input that triggered API calls on every keystroke. I used this composable to debounce the input value. The AI returned a clean useDebounce that I could use with any ref. It prevented excessive API calls and improved performance.
8. Build a Modal Component with Teleport
Prompt:
Create a Vue 3 modal component using Teleport to render it at the body level. Accept props: show (boolean), title (string), closeable (boolean). Emit 'close' when the overlay is clicked or Escape is pressed. Use a transition for open/close animation. Include a default slot for content. Style with scoped CSS and a backdrop blur.
Usage example: I needed a consistent modal for confirmations and forms. The AI generated a component with Teleport to body, keyboard event handling, and a smooth fade transition. I used it everywhere by just toggling the show prop.
9. Create a Pinia Store for Shopping Cart
Prompt:
Write a Pinia store using setup syntax for a shopping cart. State: items (array of {id, name, price, quantity}), totalItems (computed), totalPrice (computed). Actions: addItem(item), removeItem(id), updateQuantity(id, quantity), clearCart(). Persist the cart to localStorage using a watch. Use TypeScript interfaces.
Usage example: For an e-commerce site, I needed a cart store. The AI generated a fully functional store with computed properties for totals and a watch that saves the cart to localStorage on every change. I just had to add the API call for checkout.
10. Generate a Nuxt Server Route (API Endpoint)
Prompt:
Create a Nuxt 3 server route at '/api/posts' that returns a list of blog posts. Use defineEventHandler. Fetch data from a database (use a mock array for now). Support GET and POST methods. For POST, validate the body using a simple schema (title and content required). Return appropriate HTTP status codes.
Usage example: I was prototyping an API for my blog. The AI generated a server route with method handling and basic validation. I replaced the mock data with a Prisma query later. It saved me time writing boilerplate.
11. Write a Composable for Intersection Observer
Prompt:
Create a Vue 3 composable 'useIntersectionObserver' that takes a template ref and options (threshold, rootMargin). Return a boolean ref 'isVisible' that becomes true when the element enters the viewport. Use the IntersectionObserver API. Clean up on unmount.
Usage example: I needed to lazy-load images and trigger animations when elements scrolled into view. This composable worked perfectly. I passed a ref from a template, and it returned isVisible. I used it with v-if to load content only when visible.
12. Generate a Dynamic Table Component
Prompt:
Build a Vue 3 component 'DataTable' that accepts an array of column definitions (key, label, sortable, width) and an array of row data. Support sorting by clicking column headers. Emit 'sort-change' with the sort key and direction. Include a slot for custom cell rendering. Use scoped CSS for a clean table design.
Usage example: I had to display user lists, order histories, and product tables. This prompt gave me a reusable table with sorting. I passed different column configs for each use case, and it just worked.
13. Create a Nuxt Module for SEO
Prompt:
Write a Nuxt 3 module called 'nuxt-seo-meta' that automatically sets the page title and meta description based on route meta (defined in definePageMeta). Use the useHead composable. Provide a default title suffix. Allow configuration via module options.
Usage example: I needed consistent SEO across pages. The AI generated a module that reads definePageMeta and sets useHead automatically. I added it to nuxt.config.ts and it worked globally.
14. Generate a Composable for Local Storage with Reactivity
Prompt:
Write a Vue 3 composable 'useLocalStorage' that wraps localStorage. Accept a key and default value. Return a writable ref that syncs with localStorage. Use watch to persist changes. Handle SSR gracefully (check if window exists). Use TypeScript generics.
Usage example: I needed to persist user preferences like theme and sidebar state. This composable made it trivial. I used it like const theme = useLocalStorage('theme', 'light') and changes were automatically saved.
15. Write a Nuxt Plugin for Axios Instance
Prompt:
Create a Nuxt 3 plugin that provides a configured Axios instance. Set baseURL from runtime config. Add an interceptor to attach an auth token from the auth store. Add a response interceptor that redirects to login on 401. Use defineNuxtPlugin and provide the instance.
Usage example: I needed a centralized HTTP client. The AI generated a plugin that reads runtimeConfig.public.apiBase, attaches the token, and handles 401 errors. I used useNuxtApp().$api everywhere.
Conclusion
These 15 prompts cover the most common tasks in Vue.js and Nuxt development: components, composables, Pinia stores, routing, server routes, modules, and plugins. By using structured prompts, you can reduce the time spent on boilerplate and focus on business logic. Remember to always review the generated code for security and performance, and adjust it to your project's conventions. The key is to be specific about your requirements — include type information, state management patterns, and styling preferences. With practice, you'll develop your own library of prompts that make you a faster, more efficient Vue.js developer.
ASI Biont supports integration with various API services to enhance your Vue.js applications — learn more at asibiont.com/courses
Comments