50 AI Prompts for Vue.js and Nuxt.js Development

Act as a Vue 3 expert.

Task:
Set up a new Vue 3 project with Vite, TypeScript, Vue Router 4, Pinia, and Tailwind CSS.

Provide:
1. The vite.config.ts with path aliases (@/ pointing to src/)
2. The tsconfig.json configured for Vue SFCs and strict mode
3. The Pinia setup in main.ts with a typed user store
4. The Vue Router 4 setup with typed routes and lazy-loaded pages
5. The Tailwind CSS configuration and the postcss.config.js

Tech stack: Vue 3.4, Vite 5, TypeScript 5, Vue Router 4, Pinia 2, Tailwind CSS 3

Act as a Vue 3 TypeScript expert.

Task:
Build a reusable DataTable component using script setup and TypeScript.

Requirements:
- Generic type T for row data so columns are typed to the row shape
- Props: columns (label + key), rows (T[]), loading (boolean), emptyMessage (string)
- Emit: row-click with the clicked row as payload
- Slot: custom-cell(column, row) for overriding specific cell rendering
- Show a skeleton loader when loading is true
- Show emptyMessage when rows is empty and loading is false

Use: Vue 3, script setup, TypeScript, defineProps with generic, defineEmits, defineSlots

Act as a Vue 3 Pinia expert.

Task:
Create a typed Pinia store for user authentication.

State:
- user: { id: string, email: string, role: 'admin' | 'user' } | null
- token: string | null
- isLoading: boolean
- error: string | null

Getters:
- isAuthenticated: returns true when token is not null
- isAdmin: returns true when user.role is admin

Actions:
- login(email, password): POST /api/auth/login, store token and user
- logout(): clear token and user, redirect to /login
- refreshToken(): POST /api/auth/refresh, update token

Persist: token and user using pinia-plugin-persistedstate (localStorage)
Use: Pinia defineStore with setup syntax, TypeScript

Act as a Nuxt 3 expert.

Task:
Set up a Nuxt 3 application with the following routing and layout structure:

Layouts:
- default.vue: navigation bar with links to /, /dashboard, /settings, and a logout button
- auth.vue: centered card layout for /login and /register pages

Middleware:
- auth.ts (named middleware): redirect unauthenticated users to /login
  Applied to /dashboard and all routes under /admin/
- guest.ts (named middleware): redirect authenticated users away from /login

Auth state comes from useAuthStore().isAuthenticated (Pinia store).

Pages needed: index.vue, login.vue, dashboard.vue, admin/users.vue
Use: Nuxt 3, TypeScript, definePageMeta for middleware assignment

Act as a Nuxt 3 TypeScript developer.

Task:
Write a composable called useProducts that fetches paginated product data.

API endpoint: GET /api/products?page=1&limit=20
Response shape: { data: Product[], total: number, page: number, limit: number }
Product type: { id: string, name: string, price: number, category: string, stock: number }

Requirements:
- Accept page and limit as reactive ref parameters
- Automatically refetch when page changes
- Return: products, total, currentPage, pending, error
- Use a unique cache key that includes the page number
- Handle API errors with a typed error object

Use: Nuxt 3 useFetch, TypeScript, composable pattern

Act as a Vue 3 testing expert.

Task:
Write Vitest unit tests for a LoginForm component using Vue Test Utils.

Component behavior:
- Has email input, password input, and a submit button
- On submit, emits a login event with { email, password }
- Shows an error message when email field is empty
- Disables submit button when the loading prop is true
- Shows a spinner inside the button when loading is true

Test scenarios:
1. Renders all form fields
2. Emits login event with correct data on valid submit
3. Shows validation error when email is empty on submit
4. Submit button is disabled when loading prop is true
5. Spinner is visible when loading is true

Use: Vitest, @vue/test-utils, TypeScript — no mocking of child components

Act as a Vue 3 performance expert.

Task:
Audit this Vue 3 component for performance issues and provide fixes.

Focus areas:
1. Unnecessary re-renders — identify where v-memo or shallowRef would help
2. Computed properties that are recalculated too often
3. Event handlers that need debouncing or throttling
4. Large lists that should use virtual scrolling (vue-virtual-scroller)
5. Heavy child components that should use defineAsyncComponent
6. Watchers that trigger too broadly — suggest more specific watch targets

For each issue:
- Explain why it causes a performance problem
- Show the before and after code
- Estimate the impact (high / medium / low)

Component: [paste your component here]