uiux-design-vue3

Vue 3 best practices: Composition API with <script setup> and TypeScript as the default for new code, SSR, Volar and vue-tsc; in an existing Options API codebase, ask before choosing a style. Use for Vue work in general: .vue files, components, reactivity, Vue Router, Pinia, or Vite with Vue. Narrower siblings: uiux-design-vue3-testing, -debug, -router, -pinia, -composable, -jsx.

Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()/toRef() inside reactive effects (watch/watchEffect) to keep behavior predictable and reactive. Use this skill when user asks for creating adaptable or reusable composables.

Debugging and error handling in Vue 3: runtime errors and warnings, reactivity, computed and watcher surprises, props/emits, slots, lifecycle, async failures and SSR/hydration mismatches. Use when diagnosing or fixing a Vue bug, a console warning or a hydration error.

JSX in Vue 3 and how it differs from React JSX (class vs className, attribute typing, JSX plugin config). Use when writing Vue components in JSX/TSX, migrating React JSX to Vue, or fixing JSX attribute type errors.

Vue 3 Options API style (data(), methods, the this context). Use only in an existing Options API codebase where the user has confirmed they want to keep it; new code uses the Composition API (uiux-design-vue3-best-practices).

Pinia in Vue 3: store setup, state management patterns, and keeping reactivity when reading from stores. Use when creating, structuring or debugging a Pinia store.

Vue Router 4: setup, route params, navigation guards and how route changes interact with the component lifecycle. Use when adding routes or guards, or fixing navigation and stale-data bugs on param changes.

Testing Vue 3 apps: Vitest and Vue Test Utils for components, mocking, testing patterns, and Playwright for end-to-end tests. Use when writing, fixing or setting up Vue tests.