15 Prompts for Vue.js and Nuxt: Components, Composables, and Routing

Introduction

As a developer working daily with Vue.js and Nuxt, I’ve found that using AI prompts effectively can dramatically speed up repetitive coding tasks—from scaffolding components to debugging complex composables. Over the past year, I’ve curated a set of battle-tested prompts that I use in my real workflow. They are not generic; each one targets a specific pain point: creating reactive forms with Pinia, optimizing Nuxt routing with middleware, or generating type-safe composables. In this article, I’ll share 15 prompts that have saved me hours, with concrete examples and explanations. You can adapt them to your own projects and tools like Claude or ChatGPT. Let’s dive into prompts for Vue.js and Nuxt that actually work.

Why Use Prompts for Vue.js and Nuxt?

Modern Vue.js development (especially with the Composition API and Nuxt 3) involves repeating patterns: defining ref and computed, setting up useFetch calls, or structuring Pinia stores. AI prompts can generate these skeletons in seconds, letting you focus on business logic. According to the Vue.js official documentation (vuejs.org), the Composition API promotes reusable logic via composables—a perfect target for prompt automation. Nuxt’s auto-imports and file-based routing further reduce boilerplate, but prompts can still help with edge cases like dynamic routes or custom middleware. The key is to craft prompts that include context: your framework version (Vue 3.4+, Nuxt 3.12+), TypeScript usage, and specific libraries (e.g., Pinia for state management).

15 Prompts for Vue.js and Nuxt

1. Component Scaffolding with TypeScript

Prompt: "Create a Vue 3 component using the <script setup> syntax with TypeScript. It should accept props for title: string and items: Array<{id: number, name: string}>. Emit an event selectItem with the item id. Include a template that renders a list and handles click events."

Example usage: I use this prompt to quickly generate a selectable list component. The AI outputs a complete .vue file with props validation, emit definitions, and a reactive template. It saves me from writing the boilerplate each time.

2. Composable for Debounced API Calls

Prompt: "Write a Vue 3 composable called useDebouncedSearch that takes a searchTerm ref and a delay number (default 300ms). It should debounce the term using watch and setTimeout, then call an async function searchApi(query: string) that returns results. Expose results, isLoading, and error refs. Use TypeScript generics for the result type."

Why it works: This prompt defines the function signature and behavior explicitly. I often need debounced search for autocomplete fields, and this composable plugs in directly.

3. Pinia Store with Actions and Getters

Prompt: "Generate a Pinia store using the setup syntax (Vue 3 Composition API). The store is called useCartStore. State: items: Array<{id: number, name: string, price: number, quantity: number}>. Getters: totalItems (sum of quantities), totalPrice (sum of price*quantity). Actions: addItem(item), removeItem(id), clearCart. Use TypeScript for type safety."

Real-world use: I paste this prompt into my AI assistant whenever I start a new e-commerce module. The generated store is immediately usable with minimal edits.

4. Nuxt 3 API Route with Validation

Prompt: "Create a Nuxt 3 server API route at /api/products that returns a list of products. Use defineEventHandler and getQuery to parse query parameters for category and page. Validate that page is a positive integer using a simple helper. If validation fails, return a 400 status. Use TypeScript."

Note: Nuxt’s server routes are documented at nuxt.com/docs/guide/directory-structure/server. This prompt helps me avoid mistakes with event handler signatures.

5. Dynamic Route Middleware for Auth

Prompt: "Write a Nuxt 3 route middleware named auth.global.ts that checks if a user is authenticated by reading a Pinia store useAuthStore. If not authenticated and the route is not /login, redirect to /login. Use navigateTo from Nuxt. Add TypeScript types for the store."

Example: I run this prompt when setting up protected routes in a Nuxt app. It generates a middleware file that integrates with my existing store.

6. Form Validation with VeeValidate

Prompt: "Create a Vue 3 registration form component with VeeValidate 4. Fields: email (required, email format), password (required, min 8 chars), confirmPassword (must match password). Use useForm and useField composables. Display validation errors inline. Submit calls an async function registerUser(data)."

Practical tip: VeeValidate is a popular validation library (vee-validate.logaretm.com). This prompt produces a complete form that I can drop into a Nuxt page.

7. Table Component with Sorting and Filtering

Prompt: "Generate a Vue 3 component <DataTable> that accepts props: columns: Array<{key: string, label: string, sortable?: boolean}> and rows: Array<Record<string, any>>. Implement client-side sorting (click column header to toggle asc/desc) and a text filter prop filterText that filters rows by any column. Use computed for sorted and filtered rows. Emit sortChange with column key and direction."

Why this works: The prompt specifies exact prop shapes and behavior, so the AI outputs a clean, reusable component.

8. Composable for Local Storage Persistence

Prompt: "Write a Vue 3 composable useLocalStorage that takes a key string and a default value. It should read from localStorage on init, return a ref that syncs to localStorage on changes using watch (with deep: true for objects). Handle JSON serialization/deserialization. Provide a remove method to clear the key."

Example: I use this to persist user preferences (e.g., dark mode toggle) without additional libraries.

9. Nuxt 3 useFetch with Error Handling

Prompt: "Generate a Nuxt 3 composable useFetchProducts that uses useFetch to get products from /api/products. Handle loading state, error state, and return typed data Array<{id: number, name: string, price: number}>. Add a refresh function. Use useAsyncData for SSR support."

Real case: Nuxt’s useFetch works differently on server vs client. This prompt ensures proper SSR handling, as per nuxt.com/docs/api/composables/use-fetch.

10. Dynamic Route with Slug Validation

Prompt: "Create a Nuxt 3 page component at pages/products/[slug].vue that uses useRoute to get the slug. Fetch product data from useFetch using the slug. Add a validate property to check that slug is a valid string (alphanumeric with hyphens). If invalid, show a 404 page using showError."

Why it helps: Nuxt’s validate hook is documented but often forgotten. This prompt reminds me to include it.

11. Custom Directive for Intersection Observer

Prompt: "Write a Vue 3 custom directive v-intersect that triggers a callback when the element enters the viewport. Use IntersectionObserver. Accept a value that is a function (entry: IntersectionObserverEntry) => void. Clean up the observer on unmount. Register it as a global directive in a Nuxt plugin."

Usage: I use this for lazy-loading images or infinite scroll. The AI generates the plugin file and directive code.

12. Pinia Store with Undo/Redo

Prompt: "Extend the useCartStore from prompt 3 with undo/redo functionality. Maintain a history stack of state snapshots (max 50). Provide actions undo() and redo(). Use $patch to restore previous states. Ensure the store does not record undo actions themselves."

Challenge: This is a complex pattern. The prompt forces the AI to think about state management carefully.

13. Nuxt Module for Global CSS Variables

Prompt: "Create a Nuxt 3 module that reads a theme option from nuxt.config.ts (e.g., { primary: '#3490dc', secondary: '#ffed4a' }) and injects CSS custom properties into the page root via a plugin. Use defineNuxtModule and addPlugin. Ensure the module works with Nuxt 3.12+."

Note: Nuxt modules are powerful (nuxt.com/docs/guide/going-further/modules). This prompt helps me build reusable theming.

14. Composable for WebSocket Connection

Prompt: "Write a Vue 3 composable useWebSocket that connects to a URL passed as a parameter. Return data (ref for last message), sendMessage(msg) function, and close() method. Reconnect automatically on disconnect with exponential backoff (max 5 retries). Clean up on component unmount."

Real-world: I use this for live chat features. The prompt specifies reconnection logic, which is tricky to get right.

15. Nuxt 3 Layout with Multiple Slots

Prompt: "Create a Nuxt 3 layout custom.vue that has named slots: #header, #sidebar, #main, and #footer. Use <slot name="..." />. Add a <NuxtPage> inside the #main slot. Style with CSS classes for a grid layout. Include a responsive breakpoint."

Why it works: Nuxt layouts with named slots are underused. This prompt generates a flexible layout I can reuse across pages.

Comparison Table: Prompts vs Manual Coding

Best Practices for Writing Prompts

• Be specific about version: Include "Vue 3.4" or "Nuxt 3.12" to avoid deprecated syntax.
• Mention TypeScript: Always add "Use TypeScript" for type safety.
• Define inputs and outputs: State props, events, and return values explicitly.
• Add context: Mention libraries (Pinia, VeeValidate) and file structure (e.g., composables/ or server/api/).
• Request error handling: Many AI outputs skip edge cases; ask for loading/error states.

Conclusion

These 15 prompts have become part of my daily toolbox for Vue.js and Nuxt development. They save time, reduce errors, and enforce consistent patterns across projects. By adapting them to your specific needs—whether you’re building a dashboard, an e-commerce site, or a real-time app—you can focus on the unique logic rather than boilerplate. I recommend keeping a personal prompt library (I use a Markdown file) and iterating on them as frameworks evolve. Start with the ones that address your biggest pain points, and you’ll see immediate gains in productivity.

For further reading, check the official Vue.js documentation (vuejs.org) and Nuxt documentation (nuxt.com). And if you’re looking for a structured way to master Vue.js or Nuxt, ASI Biont supports connecting to your codebase through API — details at asibiont.com/courses.