Vue Skills

Develop Vue 3 applications with guidance for components, routing, state management, testing, and debugging.

This community collection from vuejs-ai includes eight Skills covering Vue 3 with Composition API and TypeScript, Options API, Vue Router, Pinia, testing, JSX, debugging, and reusable composables. The upstream project is an early experiment; check its guidance against your project and installed versions.

Use cases

  • Build Vue 3 components and reusable composables
  • Configure navigation and Pinia stores
  • Write component and end-to-end tests
  • Diagnose runtime errors and hydration issues

How to use

Install the collection and describe your Vue version, API style, and task. The author recommends starting prompts with use vue skill. Select the relevant Skill for implementation, testing, or debugging, and verify the result in your project.

Skills

  • create-adaptable-composable

    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.

    vuejs-ai/skills

  • vue-best-practices

    MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.

    vuejs-ai/skills

  • vue-debug-guides

    Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.

    vuejs-ai/skills

  • vue-jsx-best-practices

    JSX syntax in Vue (e.g., class vs className, JSX plugin config).

    vuejs-ai/skills

  • vue-options-api-best-practices

    Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only.

    vuejs-ai/skills

  • vue-pinia-best-practices

    Pinia stores, state management patterns, store setup, and reactivity with stores.

    vuejs-ai/skills

  • vue-router-best-practices

    Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

    vuejs-ai/skills

  • vue-testing-best-practices

    Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.

    vuejs-ai/skills