playbooks

home / skills / partme-ai / full-stack-skills / vue3

vue3 skill

/skills/vue3

This skill helps you learn and apply Vue 3 concepts, patterns, and API details to build components, apps, and tooling.

npx playbooks add skill partme-ai/full-stack-skills --skill vue3

Review the files below or copy the command above to add this skill to your agents.

Files (88)
SKILL.md
8.6 KB
---
name: vue3
description: Guidance for Vue 3 using the official guide and API reference. Use when the user needs Vue 3 concepts, patterns, or API details to build components, apps, and tooling.
license: Complete terms in LICENSE.txt
---

## When to use this skill

Use this skill whenever the user wants to:
- Learn or apply Vue 3 guide topics (from Introduction to advanced extras)
- Implement Vue 3 components, reactivity, templates, and routing
- Follow Vue 3 best practices, TypeScript usage, or performance guidance
- Check Vue 3 API reference for specific functions or options

## How to use this skill

1. **Identify the topic** from the user request.
2. **Open the matching guide example** file in `examples/`.
3. **If API details are needed**, open the matching file in `api/`.
4. **Follow the official guidance** and keep outputs consistent with Vue 3 documentation.

### Guide mapping (one-to-one with Guide pages)

**Getting Started**
- `examples/getting-started/introduction.md` → https://cn.vuejs.org/guide/introduction.html
- `examples/getting-started/quick-start.md` → https://cn.vuejs.org/guide/quick-start.html

**Essentials**
- `examples/essentials/application.md` → https://cn.vuejs.org/guide/essentials/application.html
- `examples/essentials/template-syntax.md` → https://cn.vuejs.org/guide/essentials/template-syntax.html
- `examples/essentials/reactivity-fundamentals.md` → https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html
- `examples/essentials/computed.md` → https://cn.vuejs.org/guide/essentials/computed.html
- `examples/essentials/class-and-style.md` → https://cn.vuejs.org/guide/essentials/class-and-style.html
- `examples/essentials/conditional.md` → https://cn.vuejs.org/guide/essentials/conditional.html
- `examples/essentials/list.md` → https://cn.vuejs.org/guide/essentials/list.html
- `examples/essentials/event-handling.md` → https://cn.vuejs.org/guide/essentials/event-handling.html
- `examples/essentials/forms.md` → https://cn.vuejs.org/guide/essentials/forms.html
- `examples/essentials/watchers.md` → https://cn.vuejs.org/guide/essentials/watchers.html
- `examples/essentials/template-refs.md` → https://cn.vuejs.org/guide/essentials/template-refs.html
- `examples/essentials/component-basics.md` → https://cn.vuejs.org/guide/essentials/component-basics.html
- `examples/essentials/lifecycle.md` → https://cn.vuejs.org/guide/essentials/lifecycle.html

**Components In-Depth**
- `examples/components/registration.md` → https://cn.vuejs.org/guide/components/registration.html
- `examples/components/props.md` → https://cn.vuejs.org/guide/components/props.html
- `examples/components/events.md` → https://cn.vuejs.org/guide/components/events.html
- `examples/components/v-model.md` → https://cn.vuejs.org/guide/components/v-model.html
- `examples/components/attrs.md` → https://cn.vuejs.org/guide/components/attrs.html
- `examples/components/slots.md` → https://cn.vuejs.org/guide/components/slots.html
- `examples/components/provide-inject.md` → https://cn.vuejs.org/guide/components/provide-inject.html
- `examples/components/async.md` → https://cn.vuejs.org/guide/components/async.html

**Reusability**
- `examples/reusability/composables.md` → https://cn.vuejs.org/guide/reusability/composables.html
- `examples/reusability/custom-directives.md` → https://cn.vuejs.org/guide/reusability/custom-directives.html
- `examples/reusability/plugins.md` → https://cn.vuejs.org/guide/reusability/plugins.html

**Built-in Components**
- `examples/built-ins/transition.md` → https://cn.vuejs.org/guide/built-ins/transition.html
- `examples/built-ins/transition-group.md` → https://cn.vuejs.org/guide/built-ins/transition-group.html
- `examples/built-ins/keep-alive.md` → https://cn.vuejs.org/guide/built-ins/keep-alive.html
- `examples/built-ins/teleport.md` → https://cn.vuejs.org/guide/built-ins/teleport.html
- `examples/built-ins/suspense.md` → https://cn.vuejs.org/guide/built-ins/suspense.html

**Scaling Up**
- `examples/scaling-up/sfc.md` → https://cn.vuejs.org/guide/scaling-up/sfc.html
- `examples/scaling-up/tooling.md` → https://cn.vuejs.org/guide/scaling-up/tooling.html
- `examples/scaling-up/routing.md` → https://cn.vuejs.org/guide/scaling-up/routing.html
- `examples/scaling-up/state-management.md` → https://cn.vuejs.org/guide/scaling-up/state-management.html
- `examples/scaling-up/testing.md` → https://cn.vuejs.org/guide/scaling-up/testing.html
- `examples/scaling-up/ssr.md` → https://cn.vuejs.org/guide/scaling-up/ssr.html

**Best Practices**
- `examples/best-practices/production-deployment.md` → https://cn.vuejs.org/guide/best-practices/production-deployment.html
- `examples/best-practices/performance.md` → https://cn.vuejs.org/guide/best-practices/performance.html
- `examples/best-practices/accessibility.md` → https://cn.vuejs.org/guide/best-practices/accessibility.html
- `examples/best-practices/security.md` → https://cn.vuejs.org/guide/best-practices/security.html

**TypeScript**
- `examples/typescript/overview.md` → https://cn.vuejs.org/guide/typescript/overview.html
- `examples/typescript/composition-api.md` → https://cn.vuejs.org/guide/typescript/composition-api.html
- `examples/typescript/options-api.md` → https://cn.vuejs.org/guide/typescript/options-api.html

**Extra Topics**
- `examples/extras/ways-of-using-vue.md` → https://cn.vuejs.org/guide/extras/ways-of-using-vue.html
- `examples/extras/composition-api-faq.md` → https://cn.vuejs.org/guide/extras/composition-api-faq.html
- `examples/extras/reactivity-in-depth.md` → https://cn.vuejs.org/guide/extras/reactivity-in-depth.html
- `examples/extras/rendering-mechanism.md` → https://cn.vuejs.org/guide/extras/rendering-mechanism.html
- `examples/extras/render-function.md` → https://cn.vuejs.org/guide/extras/render-function.html
- `examples/extras/web-components.md` → https://cn.vuejs.org/guide/extras/web-components.html
- `examples/extras/animation.md` → https://cn.vuejs.org/guide/extras/animation.html

### API mapping (one-to-one with API pages)

**Global API**
- `api/application.md` → https://cn.vuejs.org/api/application.html
- `api/general.md` → https://cn.vuejs.org/api/general.html

**Composition API**
- `api/composition-api-setup.md` → https://cn.vuejs.org/api/composition-api-setup.html
- `api/reactivity-core.md` → https://cn.vuejs.org/api/reactivity-core.html
- `api/reactivity-utilities.md` → https://cn.vuejs.org/api/reactivity-utilities.html
- `api/reactivity-advanced.md` → https://cn.vuejs.org/api/reactivity-advanced.html
- `api/composition-api-lifecycle.md` → https://cn.vuejs.org/api/composition-api-lifecycle.html
- `api/composition-api-dependency-injection.md` → https://cn.vuejs.org/api/composition-api-dependency-injection.html
- `api/composition-api-helpers.md` → https://cn.vuejs.org/api/composition-api-helpers.html

**Options API**
- `api/options-state.md` → https://cn.vuejs.org/api/options-state.html
- `api/options-rendering.md` → https://cn.vuejs.org/api/options-rendering.html
- `api/options-lifecycle.md` → https://cn.vuejs.org/api/options-lifecycle.html
- `api/options-composition.md` → https://cn.vuejs.org/api/options-composition.html
- `api/options-misc.md` → https://cn.vuejs.org/api/options-misc.html
- `api/component-instance.md` → https://cn.vuejs.org/api/component-instance.html

**Built-ins**
- `api/built-in-directives.md` → https://cn.vuejs.org/api/built-in-directives.html
- `api/built-in-components.md` → https://cn.vuejs.org/api/built-in-components.html
- `api/built-in-special-elements.md` → https://cn.vuejs.org/api/built-in-special-elements.html
- `api/built-in-special-attributes.md` → https://cn.vuejs.org/api/built-in-special-attributes.html

**Single-File Component**
- `api/sfc-spec.md` → https://cn.vuejs.org/api/sfc-spec.html
- `api/sfc-script-setup.md` → https://cn.vuejs.org/api/sfc-script-setup.html
- `api/sfc-css-features.md` → https://cn.vuejs.org/api/sfc-css-features.html

**Advanced APIs**
- `api/custom-elements.md` → https://cn.vuejs.org/api/custom-elements.html
- `api/render-function.md` → https://cn.vuejs.org/api/render-function.html
- `api/ssr.md` → https://cn.vuejs.org/api/ssr.html
- `api/utility-types.md` → https://cn.vuejs.org/api/utility-types.html
- `api/custom-renderer.md` → https://cn.vuejs.org/api/custom-renderer.html
- `api/compile-time-flags.md` → https://cn.vuejs.org/api/compile-time-flags.html

## Resources
- Guide: https://cn.vuejs.org/guide/introduction.html
- API: https://cn.vuejs.org/api/

## Keywords
Vue 3, Vue.js, Composition API, Options API, reactivity, template syntax, components, directives, lifecycle, routing, state management, TypeScript

Overview

This skill provides practical guidance for building Vue 3 applications using the official guide and API reference. It helps implement core concepts like the Composition API, reactivity, templates, components, routing, and TypeScript integration. Use it to get concise, documentation-aligned answers and examples for day-to-day Vue 3 development.

How this skill works

I map user questions to the matching Vue 3 guide or API topic and return focused explanations, patterns, or small code examples consistent with the official documentation. For conceptual requests I explain core principles and trade-offs; for API questions I summarize function signatures, options, and common usage. When needed I show minimal reproducible examples and recommend next steps for testing or tooling.

When to use it

  • Learning or reviewing Vue 3 core concepts (reactivity, lifecycle, templates).
  • Designing or implementing components with Composition API or Options API.
  • Integrating routing, state management, SSR, or single-file components (SFCs).
  • Applying TypeScript to Vue 3 projects or typing Composition API patterns.
  • Optimizing performance, accessibility, or preparing production deployments.

Best practices

  • Prefer the Composition API for reusable logic, but use Options API for simple components or migration ease.
  • Keep reactive state minimal and use computed/watch for derived values to avoid unnecessary renders.
  • Use script setup for concise SFCs and prefer explicit emits/props typings with TypeScript.
  • Encapsulate reusable logic in composables and test them independently from components.
  • Profile and lazy-load heavy components; use Suspense/async components for network-heavy views.

Example use cases

  • Convert an Options API component to Composition API with typed props and emits.
  • Create a composable for shared data fetching with caching and error handling.
  • Explain differences between ref and reactive and when to use each.
  • Set up routing with nested routes and route guards for authentication flows.
  • Implement SSR-safe lifecycle code and hydration-friendly data fetching.

FAQ

Should I always use Composition API instead of Options API?

No. Composition API is better for logic reuse and complex components; Options API is fine for small or legacy components and can be easier for newcomers.

When to use ref vs reactive?

Use ref for primitive values and when you need a stable reference; use reactive for objects and collections where you want reactive property access. Wrap primitives in ref when storing them in reactive objects if needed.

How to type props and emits in TypeScript?

Prefer defining PropType<T> for props and use defineEmits/defineProps (script setup) or generics on defineComponent to get full type inference and editor support.