Vue.js & Nuxt AI Prompts: Build Production Apps Faster in 2026

Vue 3 & Nuxt 4 in 2026: The Progressive Framework at Scale

Vue 3's Composition API and Nuxt 4's hybrid rendering make them a powerful pair for everything from marketing sites to complex dashboards. The key to getting great AI-generated Vue code is specifying the modern patterns: script setup, TypeScript, Pinia, and composables — not the Options API and Vuex patterns that dominate older tutorials.

1. Nuxt 4 Project Architecture

You are a senior Nuxt 4 architect.

Design a production Nuxt 4 SaaS application structure:
- Authentication: nuxt-auth-utils with Google + GitHub providers
- Database: Drizzle ORM + PostgreSQL (Neon serverless)
- State: Pinia with pinia-plugin-persistedstate
- UI: Nuxt UI v3 (built on Tailwind CSS v4)
- Payments: Stripe with Nuxt server routes for webhooks

Deliver:
1. Full directory tree: pages/, components/, composables/, server/api/, stores/, types/
2. Which pages use SSR, SSG, or SPA mode (nuxtRouteRules per route)
3. Pinia store architecture: which stores, what they own, what they share
4. Server route security pattern: authentication middleware reused across all /api/* routes
5. nuxt.config.ts with runtime config strategy (public vs private env vars)

2. Vue 3 Components with script setup

You are a Vue 3 expert using the Composition API and script setup syntax.

Build a DataTable<T> generic Vue 3 component with TypeScript:

Features:
- Generic columns: ColumnDef<T> with key, label, sortable, width, renderCell slot
- Client-side sorting with visual direction indicators
- Row selection: checkbox per row, shift+click range, select-all header checkbox
- Pagination: configurable page sizes, emit page-change event for server-side support
- Slot: #actions(row) for per-row action buttons
- Loading state: skeleton rows (animated pulse)
- Empty state: default slot with override
- WCAG 2.1 AA: role="grid", aria-sort on sortable headers, keyboard navigation

Props interface with defineProps<Props>() TypeScript generic.
Emits: sort-change, page-change, selection-change.
CSS: scoped styles using Tailwind CSS utility classes.
No third-party table library dependencies.

3. Pinia Store with Optimistic Updates

You are a Pinia expert for Vue 3 TypeScript applications.

Build a useTaskStore (Setup store syntax) for a project management app:

State:
- tasks: Map<string, Task> (keyed by ID for O(1) lookup)
- tasksByProject: Map<string, string[]> (project ID → task IDs)
- loading: Record<string, boolean> (keyed by operation)
- error: string | null
- pagination: { page, pageSize, total, hasMore }
- filters: { status, priority, assignedTo, dueDateRange }

Actions:
- fetchTasks(projectId, filters): load paginated tasks into Map
- createTask(data): optimistic insert → API call → rollback on failure
- updateTask(id, patch): optimistic update → API call → rollback on failure
- deleteTask(id): optimistic remove → API call → restore on failure

Getters (computed):
- getTask(id): single task from Map
- projectTasks(projectId): ordered task array from tasksByProject Map
- overdueTasks: filtered derived list
- completionStats: { total, done, percentage } for current project

Persist: filters and pagination preferences only (not task data).
TypeScript throughout. Show usage in a Vue component.

4. Nuxt Server API Route with Validation

You are a Nuxt 4 server-side expert.

Build Nuxt server routes for the Task resource (server/api/tasks/):

Files: index.get.ts, index.post.ts, [id].get.ts, [id].patch.ts, [id].delete.ts

Every route must:
- Authenticate via requireUserSession() (nuxt-auth-utils)
- Validate input with Zod (body for POST/PATCH, query for GET, params always)
- Scope DB queries to session.user.organizationId (never trust client-sent org ID)
- Return consistent shape: { data, meta? } on success
- Use createError() for all errors: { statusCode, message, data?: { fieldErrors } }
- Log structured events: method, path, userId, tenantId, duration

index.get.ts: paginated list with filtering (status, priority, assignedTo)
index.post.ts: create task, run Drizzle insert, return created task
[id].patch.ts: partial update with optimistic concurrency (version field check)
[id].delete.ts: soft delete (set deletedAt), return 204

Show Drizzle ORM queries for each route.

5. Composables for Data Fetching

You are a Vue 3 composables expert.

Build a set of production composables for a Nuxt 4 app:

useApi<T>(endpoint, options):
- Wraps $fetch with: auth headers from session, base URL from runtime config
- Error normalisation: always return { data, error, loading } shape
- Retry: 3 times with exponential backoff on network errors only
- AbortController: cancel on component unmount or new call

usePaginatedTasks(projectId, filters):
- Calls useApi for paginated task list
- Cursor-based or offset pagination with has-more flag
- Auto-refetch when filters change (watchEffect)
- Merge: append new page results to existing list (infinite scroll support)
- Returns: { tasks, loading, error, hasMore, loadMore, refresh }

useOptimisticMutation<T>(mutationFn):
- Accepts: optimisticValue, onSuccess, onError callbacks
- Applies optimistic update to Pinia store immediately
- Calls mutationFn (API call)
- On success: confirm optimistic state
- On error: rollback optimistic state, show toast error

TypeScript strict. Show usage in 2 Vue components.

6. Vue Component Testing with Vitest

You are a Vue Testing Library + Vitest expert.

Write component tests for a TaskForm.vue component:

[PASTE COMPONENT CODE]

Requirements:
- renderWithProviders(): custom render wrapper with Pinia, Vue Router, i18n
- Test user behavior, not internals (no accessing component refs or internal state)
- Use userEvent for all interactions (typing, clicking, selecting)
- MSW (Mock Service Worker) for API calls

Test cases:
1. Renders all form fields with correct labels (accessibility query: getByLabelText)
2. Shows validation errors below each field on submit with empty form
3. Due date in past shows inline error without submit
4. Successful submit: calls API with correct payload, shows success toast, emits 'created' event
5. API error: shows error message, form remains submittable (not locked)
6. Loading state: submit button disabled and shows spinner during API call
7. Dirty form: navigate away → confirm dialog appears (useBeforeRouteLeave)
8. Keyboard: Tab through all fields in correct order, Enter submits form

vitest.config.ts setup with jsdom environment.

7. Good vs Bad Vue/Nuxt Prompts

Task	❌ Bad Prompt	✅ Good Prompt
Component	"Build a task form in Vue"	"Build TaskForm.vue with script setup, TypeScript, Vue 3 Composition API. Use VeeValidate + Zod schema. Fields: title (required, min 3), description (optional, textarea), dueDate (future dates only), assignee (async search combobox with 300ms debounce). Emit 'submit' with typed payload. Show field-level errors."
State	"Create a Pinia store"	"Create useTaskStore (Pinia Setup store) with TypeScript. State: Map<string,Task> for O(1) lookup. Actions: createTask with optimistic insert + rollback on API failure. Getter: overdueTasks computed from Map. Persist filter preferences only via pinia-plugin-persistedstate."
Server route	"Add an API to my Nuxt app"	"Write server/api/tasks/index.post.ts for Nuxt 4: requireUserSession() auth, Zod body validation, Drizzle insert scoped to session.user.organizationId, createError() on validation failure, return { data: createdTask } with 201 status."

Generate a custom Vue/Nuxt prompt → Try PromptPrepare free