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

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)

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.

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.

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.

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.

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.

You are a Nuxt 4 full-stack engineer.

Implement server-side authentication middleware for a Nuxt 4 application:

Middleware: server/middleware/auth.ts (runs on every server request)
- Read JWT from Authorization header or __session cookie (cookie-first for SSR, header-first for API clients)
- Verify JWT using jose library (not jsonwebtoken — edge runtime compatible)
- On valid JWT: set event.context.user = { id, email, role, tenantId }
- On invalid/missing JWT for protected routes: throw createError({ statusCode: 401 })
- Public routes (no auth required): /api/auth/*, /api/public/*, all non-/api routes (handled by page-level auth)

Route protection in pages: definePageMeta({ middleware: 'auth' })
Nuxt route middleware: middleware/auth.ts (client-side guard that redirects to /login)
useAuth() composable:
  - user: readonly computed from useState('user')
  - isAuthenticated: computed boolean
  - login(credentials) → POST /api/auth/login, set cookie, update state
  - logout() → POST /api/auth/logout, clear cookie and state, redirect

Output: server middleware, route middleware, useAuth composable, and example protected page.

You are a Nuxt content engineer.

Set up Nuxt Content v3 for a technical blog with advanced features:

Content structure: content/blog/[slug].mdx — frontmatter: title, description, date, tags, author, draft

Features to implement:
1. Blog listing page: /blog — query all non-draft posts, sort by date, paginate 10/page with useAsyncData
2. Blog detail: /blog/[slug] — dynamic OG image generation with Satori, reading time calculation
3. MDX components: CodeBlock (syntax highlighting with Shiki, copy button, language badge), Callout (info/warning/danger variants), YouTubeEmbed
4. Search: full-text search across all blog posts using Nuxt Content's built-in search API
5. Related posts: query posts with matching tags, exclude current post, limit 3
6. RSS feed: /rss.xml server route that generates valid RSS 2.0 from all posts
7. Sitemap: auto-generate /sitemap.xml including all blog slugs

TypeScript: define CollectionSchema for blog posts with Zod validation of frontmatter

Output: nuxt.config.ts with content module setup, page components, MDX component examples, and the RSS route.

You are a Vue 3 animation engineer.

Implement smooth page transitions and component animations in a Nuxt 4 app:

Page transitions:
- Define pageTransition in nuxt.config.ts: name 'page', mode 'out-in'
- app.vue: <NuxtPage :transition="route.meta.pageTransition" />
- Fade transition: default (opacity 0 → 1, 200ms ease)
- Slide transition: dashboard pages (translateX -20px → 0, 300ms ease-out)
- Per-page override: definePageMeta({ pageTransition: { name: 'slide', mode: 'out-in' } })

GSAP animations with Vue 3 Composition API:
- useEntranceAnimation(el: Ref<HTMLElement | null>) composable: GSAP timeline that runs on onMounted, cleanup on onUnmounted
- Stagger animation for list items: gsap.from('.list-item', { opacity: 0, y: 20, stagger: 0.05 })
- ScrollTrigger for section reveals: fade-in when section enters viewport

<TransitionGroup> for dynamic lists:
- Task list reorder animation using FLIP technique (Vue's built-in move-class)
- Item add/remove with height animation (GSAP + Vue transition hooks: onEnter, onLeave)

Output: transition CSS classes, GSAP composable, and 3 example component implementations.

Context for all Vue/Nuxt prompts in this session:
- Framework: Nuxt 4 (OR Vue 3 + Vite 6 SPA — specify which)
- Language: TypeScript, all components use <script setup lang="ts">
- State: Pinia 3 with setup stores (NOT Vuex, NOT Options stores)
- Nuxt: auto-imports enabled — do NOT manually import ref, computed, watch,
  or any useXxx composable from 'vue' or '#imports'
- Styling: Tailwind CSS v4

Never generate:
- Options API (no data(), methods:, computed:, mounted:)
- Vuex (store module, mapState, mapGetters)
- Vue 2 lifecycle hooks (beforeDestroy → onBeforeUnmount, destroyed → onUnmounted)
- defineComponent() wrapper (script setup is always preferred)