playbooks

home / skills / bankkroll / skills-builder / vuejs

vuejs skill

/skills/vuejs

This skill helps you answer Vue.js questions clearly by applying best practices, built-ins, and component concepts from official guidance.

npx playbooks add skill bankkroll/skills-builder --skill vuejs

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

Files (17)
SKILL.md
4.2 KB
---
name: "vuejs"
description: "Scraped from https://vuejs.org/guide/ Source: https://vuejs.org/guide/. Use when questions involve: best practices, built ins, components, essentials, extras, reusability."
---

# Vuejs

> Official documentation: https://vuejs.org/guide/

## Overview

This skill provides comprehensive documentation for vuejs.

**Total references:** 16 files (~102,816 tokens)

**Topics covered:**
Multiplev-modelBindings, General Usage Notes, reactive, Non-Vue Web Components and TypeScript, TypeScript Integration, Tracking Runtime Errors, Official Router, General Optimizations, Error Handling, Next Steps, Project Scaffolding, Render Scope...

## Reference Files

Load only the reference files relevant to the user's question:

### Best Practices

- **[Accessibility​ and more](references/best-practices.md)** (~7,491 tokens)
  - Topics: Skip link, Content Structure, Semantic Forms

### Built Ins

- **[KeepAlive​ and more](references/built-ins.md)** (~7,579 tokens)
  - Topics: Basic Usage, Include  Exclude, Max Cached Instances

### Components

- **[Async Components​ and more](references/components-1.md)** (~7,027 tokens)
  - Topics: Basic Usage, Loading and Error States, Lazy Hydration
- **[Provide / Inject​ and more](references/components-2.md)** (~7,781 tokens)
  - Topics: Prop Drilling, Provide, App-level Provide

### Essentials

- **[Creating a Vue Application​ and more](references/essentials-1.md)** (~7,524 tokens)
  - Topics: The Application Instance, The Root Component, Mounting the App
- **[Conditional Rendering​ and more](references/essentials-2.md)** (~6,441 tokens)
  - Topics: v-if, v-else, v-else-if
- **[Reactivity Fundamentals​ and more](references/essentials-3.md)** (~7,389 tokens)
  - Topics: Declaring Reactive State, Declaring Reactive State, Declaring Methods
- **[Watchers​](references/essentials-4.md)** (~3,318 tokens)
  - Topics: Basic Example, Deep Watchers, Eager Watchers

### Extras

- **[Animation Techniques​ and more](references/extras-1.md)** (~7,096 tokens)
  - Topics: Class-based Animations, State-driven Animations, Animating with Watchers
- **[Reactivity Transform​ and more](references/extras-2.md)** (~7,803 tokens)
  - Topics: Refs vs Reactive Variables, Destructuring with, Convert Existing Refs to Reactive Variables with
- **[Ways of Using Vue​ and more](references/extras-3.md)** (~5,279 tokens)
  - Topics: Standalone Script, Embedded Web Components, Single-Page Application SPA

### General

- **[Introduction​ and more](references/general.md)** (~4,033 tokens)
  - Topics: What is Vue, The Progressive Framework, Single-File Components

### Reusability

- **[Composables​ and more](references/reusability.md)** (~5,509 tokens)
  - Topics: What is a Composable, Mouse Tracker Example, Async State Example

### Scaling Up

- **[Routing​ and more](references/scaling-up-1.md)** (~6,836 tokens)
  - Topics: Client-Side vs Server-Side Routing, Official Router, Simple Routing from Scratch
- **[Testing​ and more](references/scaling-up-2.md)** (~5,509 tokens)
  - Topics: Why Test, When to Test, Testing Types

### Typescript

- **[TypeScript with Composition API​ and more](references/typescript.md)** (~6,201 tokens)
  - Topics: Typing Component Props, Typing Component Emits, Typingref

## Usage Guidelines

1. **Identify relevant sections** - Match the user's question to the appropriate reference file(s)
2. **Load minimally** - Only read files directly relevant to the question to conserve context
3. **Cite sources** - Reference specific sections when answering
4. **Combine knowledge** - For complex questions, you may need multiple reference files

### When to use each reference:

- **Best Practices**: Best Practices-related features and documentation
- **Built Ins**: Built Ins-related features and documentation
- **Components**: UI components, styling, and visual elements
- **Essentials**: Essentials-related features and documentation
- **Extras**: Extras-related features and documentation
- **General**: General documentation, overview, and getting started
- **Reusability**: Reusability-related features and documentation
- **Scaling Up**: Scaling Up-related features and documentation
- **Typescript**: Typescript-related features and documentation

Overview

This skill encapsulates core Vue.js guidance drawn from the official guide, covering essentials, components, built-ins, reusability, extras, and scaling topics. It helps developers find practical patterns for reactive state, component design, routing, TypeScript, and testing. Use it for actionable, example-driven recommendations and best practices when working with Vue applications.

How this skill works

The skill inspects the Vue guide sections relevant to a question—Essentials for reactivity and rendering, Components and Built-ins for component patterns and lifecycle utilities, Reusability for composables, Extras for alternative usages and animations, and Scaling Up for routing and testing. It synthesizes concise recommendations, code patterns, and trade-offs to answer questions about implementation, architecture, and optimization. For TypeScript or accessibility questions, it pulls guidance from the respective sections to give typed patterns and accessibility checks.

When to use it

  • Choosing between Options API and Composition API or typing components with TypeScript
  • Designing reusable logic with composables or avoiding prop drilling (provide/inject)
  • Implementing component-level optimizations like KeepAlive, async components, or lazy hydration
  • Setting up routing, client vs server considerations, and official router usage
  • Applying best practices for accessibility, forms, and semantic markup
  • Adding animations, transitions, or integrating Vue with non-Vue web components

Best practices

  • Prefer Composition API for complex state and reusable logic; encapsulate side effects in composables for testability and reuse
  • Use reactive primitives (ref/reactive) consistently; avoid mutating props directly and expose actions via emits or methods
  • Favor async components and Suspense for large routes or rarely used UI to reduce initial bundle size
  • Apply KeepAlive judiciously to cache frequently visited component state; control cached keys with include/exclude and max props
  • Use semantic HTML and skip links for accessibility; validate forms using native semantics then enhance with Vue where needed
  • Type your props, emits, and composables when using TypeScript to surface errors early and improve DX

Example use cases

  • Create a composable to share fetching logic across pages and test it in isolation
  • Convert a large SPA route to an async component with a loading and error state to speed initial load
  • Use Provide/Inject to pass app-level services like theme or i18n without prop drilling
  • Wrap frequently visited view components with KeepAlive and limit cache size with max to manage memory
  • Migrate a component to Composition API and add TypeScript types for props and emits to improve maintainability

FAQ

When should I use KeepAlive?

Use KeepAlive for components you revisit often to preserve their state and avoid full re-renders; configure include/exclude or max to limit cached entries.

When are composables better than mixins?

Composables offer explicit, testable, and type-friendly reuse of logic without the implicit conflicts and magic of mixins; prefer composables for new code.

How do I choose between ref and reactive?

Use ref for single scalar values or when you need stable references; use reactive for objects where multiple properties change together and you want a proxied object.