hyf0/vue-skills▌

Vue Pinia state management patterns, common reactivity pitfalls, and store setup best practices. \n \n Covers three core areas: store initialization, reactivity patterns, and state management conventions \n Addresses frequent gotchas including destructuring breaking reactivity, method binding issues, and missing state in DevTools or SSR \n Provides guidance on filter persistence, URL-based ephemeral state, and scaling Pinia for production applications \n Includes troubleshooting references for \

Comprehensive Vue 3 debugging reference covering reactivity, components, templates, lifecycle, SSR, and 100+ common runtime issues. \n \n Organized by feature area (reactivity, computed, watchers, components, templates, forms, lifecycle, SSR, TypeScript, and more) with direct links to specific error scenarios and fixes \n Covers Vue 3 specific gotchas including ref unwrapping, proxy identity hazards, v-model composition events, template ref timing, and hydration mismatches \n Addresses async pat

VueUse composable patterns, SSR compatibility, and TypeScript integration best practices. \n \n Covers SSR-specific gotchas and patterns for safely using VueUse composables in server-rendered environments \n Addresses common issues with element ref handling and type inference when working with VueUse APIs \n Provides efficiency rules to help debug and resolve VueUse integration problems consistently \n

Vue 3 development with Composition API, <script setup> , and TypeScript as the standard approach. \n \n Enforces a structured workflow: confirm architecture, apply core foundations (reactivity, SFC structure, component focus, data flow, composables), then add optional features only when needed \n Requires reading and applying four core references before implementation: reactivity, SFC structure, component data flow, and composables \n Provides explicit component-splitting rules based on res

TypeScript configuration and type safety patterns for Pinia stores in Vue 3. \n \n Addresses storeToRefs type inference issues, particularly nested ref type loss in Vue 3.5+ \n Resolves circular type references and any type errors in getters that use this \n Provides setup store patterns and best practices for type-safe store configuration \n Covers common debugging scenarios when working with Pinia in TypeScript projects \n

Vue 3 Options API patterns, TypeScript integration strategies, and context-binding gotchas. \n \n Covers TypeScript type safety for component properties, this context, prop validators, event handlers, complex types, provide/inject, and computed return types \n Addresses common method and lifecycle hook pitfalls including arrow function binding issues and stateful method side effects \n Includes references to specific solutions for each pattern, from defineComponent setup to proper event handler

Vue Router 4 patterns, navigation guards, and route-lifecycle best practices. \n \n Covers five navigation guard patterns including async/await handling, deprecated next() function migration, infinite redirect loops, and param-change detection \n Addresses route-lifecycle gotchas like stale data when navigating between same routes and event listener cleanup on component unmount \n Includes guidance on beforeRouteEnter guard limitations, component instance access, and param-triggered navigation b

Best practices and architectural patterns for Vue 3 and Nuxt 3 projects. \n \n Emphasizes core principles: predictable state with single source of truth, explicit data flow (props down, events up), and small focused components \n Requires Composition API with <script setup lang=\"ts\"> as the default, and mandates following detailed guides for reactivity, SFC structure, and component organization \n Provides a checklist-driven approach covering component splitting, composable extraction, an

Comprehensive Vue.js testing guidance covering unit, component, and end-to-end testing strategies. \n \n Addresses 11 common testing challenges including async handling, composable testing, Pinia store setup, Suspense components, and Teleport queries \n Recommends Vitest for unit and component testing infrastructure, with Playwright as the preferred E2E framework \n Covers black-box component testing patterns to reduce brittleness during refactoring, async/await synchronization, and snapshot tes

Library-grade Vue composables that accept plain values, refs, or getters as inputs. \n \n Use MaybeRefOrGetter for read-only inputs (computed-friendly) and MaybeRef for writable two-way inputs; normalize with toRef() for reactive sources and toValue() for non-reactive values \n Avoid MaybeRefOrGetter when parameters are callbacks or predicates to prevent accidental function invocation \n Requires Vue 3 or Nuxt 3; follow the four-step design pattern: confirm API, identify reactive params, normali

Vue JSX syntax patterns and migration guidance from React JSX. \n \n Covers attribute naming differences between Vue and React JSX (e.g., class vs className ) \n Includes JSX plugin configuration for Vue projects \n Provides reference material for migrating existing React JSX code to Vue or resolving attribute type errors \n