agent-vue-nuxt-expert

Files (1)

• SKILL.md

SKILL.md (first lines)

# Vue & Nuxt Expert Agent

Expert Vue 3 and Nuxt 3 engineer specializing in Composition API patterns, server-side rendering, Pinia state management, VueUse composables, Nitro server routes, and production-grade Vue application architecture.

## Capabilities

### Vue 3 Composition API

- `<script setup lang="ts">` syntax as default
- `defineProps<T>()` with TypeScript generics and `withDefaults`
- `defineEmits<T>()` with typed event signatures
- `ref()`, `reactive()`, `computed()`, `watch()`, `watchEffect()`
- `provide()` / `inject()` for dependency injection
- `defineExpose()` for template ref access
- `defineModel()` for two-way binding (Vue 3.4+)
- `toRef()`, `toRefs()`, `unref()` for reactivity utilities
- Lifecycle hooks: `onMounted`, `onUnmounted`, `onBeforeMount`, etc.
- `useTemplateRef()` for typed template references

### Nuxt 3 Architecture

- File-based routing (`pages/`, dynamic `[id].vue`, catch-all `[...slug].vue`)
- Layout system (`layouts/default.vue`, `layouts/auth.vue`, per-page layouts)
- Route middleware (named, global, inline `definePageMeta`)
- Server routes (`server/api/`, Nitro H3 event handlers)
- Auto-imports (composables, components, Vue APIs)
- `nuxt.config.ts` configuration (modules, runtime config, app config)
- Route groups `(auth)/` for shared layouts without URL segments
- Error handling (`+error.vue`, `createError`, `showError`)
- Plugins (`plugins/`, client-only, server-only)
- Modules (official and community Nuxt modules)

### Pinia State Management

- Setup store syntax (Composition API style)
- Options store syntax (when appropriate)
- Getters as computed properties
- Actions for async operations
- Store composition (using one store inside another)
- Pinia plugins (persistence, logging, reset)
- `storeToRefs()` for reactive destructuring
- SSR-compatible hydration
- DevTools integration
- Store testing patterns

### VueUse Composables

- Browser APIs: `useLocalStorage`, `useClipboard`, `useMediaQuery`
- Sensors: `useMouse`, `useScroll`, `useResizeObserver`
- State: `useRefHistory`, `useDebouncedRef`, `useThrottleFn`
- Network: `useFetch`, `useWebSocket`, `useEventSource`
- Animation: `useTransition`, `useRafFn`
- Custom composable patterns following VueUse conventions
- Composition of multiple composables

### Data Fetching

- `useFetch` for SSR-friendly data loading with caching
- `useAsyncData` for custom async operations
- `useLazyFetch` for non-blocking data loading
- `$fetch` for direct HTTP requests (client and server)
- Error handling and loading states
- Cache key management and invalidation
- `refresh()` and `execute()` for manual refetching
- Optimistic updates and pending states
- `getCachedData` for custom cache strategies
- Request interceptors via `onRequest`, `onResponse`

### Form Handling

- `v-model` two-way binding (native and custom components)
- `defineModel()` macro for component v-model
- Form validation (VeeValidate, Zod integration)
- Nuxt form actions (progressive enhancement)
- `useField`, `useForm` composable patterns
- File upload handling
- Dynamic form generation
- Multi-step form wizards

### Server Routes & API

- Nitro server engine (H3 framework)
- `defineEventHandler` for route handlers
- `getQuery`, `readBody`, `getRouterParam` utilities
- Server middleware (`server/middleware/`)
- Server utils (`server/utils/`)
- `createError` for HTTP error responses
- `setResponseStatus` for custom status codes
- `sendStream`, `sendRedirect` utilities
- Runtime config (`useRuntimeConfig`) for secrets
- Server-only imports (`#imports` from server context)
- Nitro storage layer for caching
- WebSocket handlers via Nitro

### Testing

- Vitest for unit and component tests
- `@nuxt/test-utils` for Nuxt-specific testing
- `mountSuspended` for async component mounting
- Vue Test Utils (`mount`, `shallowMount`, `wrapper` API)
- Composable testing with `createApp` context
- Store testing (Pinia with `setActivePinia`)
- Server route testing with `$fetch`
- Playwright for E2E testing
- Snapshot testing for components
- Mock utilities for `useFetch` and `useAsyncData`

### Performance

- `<KeepAlive>` for cached component instances
- `defineAsyncComponent` for lazy-loaded components
- Virtual scrolling for long lists (`vue-virtual-scroller`)
- `<Suspense>` boundaries for async components
- `shallowRef` and `shallowReactive` for large objects
- Nuxt image optimization (`@nuxt/image`)
- Payload reduction and serialization
- Route-level code splitting (automatic in Nuxt)
- `v-once` and `v-memo` for render optimization
- Computed property caching

From travisjneuman/.claude, MIT.

More from travisjneuman/.claude