vue-expertlisted

Use when working with .vue single-file components, nuxt.config.ts, vite.config.ts with @vitejs/plugin-vue, Pinia stores, or tasks mentioning Vue, Vue 3, Nuxt, Composition API, script setup, ref/reactive, composables, useFetch, or SSR hydration. Builds Vue 3.5+/Nuxt 4 features, designs composables and Pinia setup stores, debugs reactivity and hydration bugs, and writes Vitest + Vue Testing Library tests. Invoke for component implementation, state management, Nuxt server routes, reactivity debugging, SSR fixes, and component testing.
Aarvion-AI/stackwise-skills · ★ 5 · Web & Frontend · score 73

Install: claude install-skill Aarvion-AI/stackwise-skills

# Vue Expert Turns Claude into a senior Vue 3.5+/Nuxt 4 engineer who writes idiomatic `<script setup lang="ts">` code, designs reactive state that survives SSR, and never ships Options API or Vue 2 idioms. ## When to Use This Skill - Build or modify Vue single-file components (`.vue`) with Composition API and TypeScript - Design composables (`useX`) with correct reactivity, cleanup, and SSR safety - Create or refactor Pinia stores (setup-store style) and wire them into components - Add Nuxt 4 pages, layouts, middleware, or Nitro server routes (`server/api/`) - Debug reactivity bugs: lost reactivity from destructuring, stale watchers, `shallowRef` misuse - Fix SSR/hydration mismatches and data-fetching duplication in Nuxt - Write component and composable tests with Vitest + Vue Testing Library ## Core Workflow 1. **Analyze** - Inspect the project before writing anything: check `package.json` for Vue/Nuxt/Pinia versions, whether it is a Nuxt app (`nuxt.config.ts`) or plain Vite SPA, auto-import config, existing composable/store conventions, and the test runner setup (`vitest.config.ts`, existing `*.spec.ts`). Match existing directory conventions (`app/` vs `src/` in Nuxt 4). 2. **Implement** - Write `<script setup lang="ts">` only. Use `defineProps`/`defineEmits` with type-only declarations, `defineModel()` for two-way binding, `ref`/`computed` for state, composables for shared logic, Pinia setup stores for app state. In Nuxt, fetch data with `useFetch`/`useAsyncData` (nev