vibe_coding/.cursor/skills/component-scaffold/references/vue-api-reference.md

Vue.ts 3 API Reference

Quick reference with links to official Vue.ts documentation.

Official Documentation

Main Site: https://vuejs.org

Table of Contents

1. Getting Started
2. Essentials
3. Components In-Depth
4. Reusability
5. Built-in Components
6. API Reference
7. TypeScript Patterns

---

Getting Started

Introduction

URL: https://vuejs.org/guide/introduction.html

• What is Vue?
• Progressive Framework
• Single-File Components
• API Styles (Options vs Composition)
• Which to choose?

Quick Start

URL: https://vuejs.org/guide/quick-start.html

• Creating a Vue Application
• Using Vue from CDN
• With build tools (Vite)
• IDE Setup

Creating an Application

URL: https://vuejs.org/guide/essentials/application.html

• Application instance
• Root component
• Mounting the app
• App configurations

---

Essentials

Template Syntax

URL: https://vuejs.org/guide/essentials/template-syntax.html

• Text interpolation
• Raw HTML (v-html)
• Attribute bindings (v-bind)
• TypeScript expressions
• Directives

Reactivity Fundamentals

URL: https://vuejs.org/guide/essentials/reactivity-fundamentals.html

• ref() - Reactive state for primitives
• reactive() - Reactive objects
• Reactive proxy vs original
• nextTick() - DOM update timing

Computed Properties

URL: https://vuejs.org/guide/essentials/computed.html

• Basic usage
• Computed caching vs methods
• Writable computed
• Best practices

Class and Style Bindings

URL: https://vuejs.org/guide/essentials/class-and-style.html

• Binding HTML classes
• Binding inline styles
• Object syntax
• Array syntax

Conditional Rendering

URL: https://vuejs.org/guide/essentials/conditional.html

• v-if, v-else-if, v-else
• v-show
• v-if vs v-show
• v-if with v-for

List Rendering

URL: https://vuejs.org/guide/essentials/list.html

• v-for with arrays
• v-for with objects
• v-for with ranges
• Maintaining state with key
• Array change detection

Event Handling

URL: https://vuejs.org/guide/essentials/event-handling.html

• Listening to events (v-on / @)
• Method handlers
• Inline handlers
• Event modifiers (.stop, .prevent, etc.)
• Key modifiers

Form Input Bindings

URL: https://vuejs.org/guide/essentials/forms.html

• v-model basics
• Text, textarea inputs
• Checkboxes, radio buttons
• Select dropdowns
• Modifiers (.lazy, .number, .trim)

Lifecycle Hooks

URL: https://vuejs.org/guide/essentials/lifecycle.html

• Lifecycle diagram
• onMounted(), onUpdated(), onUnmounted()
• onBeforeMount(), onBeforeUpdate(), onBeforeUnmount()
• onErrorCaptured(), onActivated(), onDeactivated()

Watchers

URL: https://vuejs.org/guide/essentials/watchers.html

• watch() - Watch specific sources
• watchEffect() - Auto-track dependencies
• Deep watchers
• Eager watchers (immediate)
• Callback flush timing
• Stopping watchers

Template Refs

URL: https://vuejs.org/guide/essentials/template-refs.html

• Accessing DOM elements
• Refs inside v-for
• Function refs
• Component refs

Components Basics

URL: https://vuejs.org/guide/essentials/component-basics.html

• Defining components
• Using components
• Passing props
• Listening to events
• Slots

---

Components In-Depth

Registration

URL: https://vuejs.org/guide/components/registration.html

• Global registration
• Local registration
• Component name casing

Props

URL: https://vuejs.org/guide/components/props.html

• Props declaration
• Prop types and validation
• Prop passing details
• One-way data flow
• Boolean casting
• Prop validation

Events

URL: https://vuejs.org/guide/components/events.html

• Emitting and listening to events
• Event arguments
• Declaring emitted events
• Events validation
• Usage with v-model

Component v-model

URL: https://vuejs.org/guide/components/v-model.html

• Basic usage
• v-model arguments
• Multiple v-model bindings
• Custom modifiers

Fallthrough Attributes

URL: https://vuejs.org/guide/components/attrs.html

• Attribute inheritance
• Disabling inheritance
• Accessing fallthrough attributes
• Multi-root nodes

Slots

URL: https://vuejs.org/guide/components/slots.html

• Default slot content
• Named slots
• Scoped slots
• Renderless components

Provide / Inject

URL: https://vuejs.org/guide/components/provide-inject.html

• Basic usage
• App-level provide
• Working with reactivity
• Working with Symbol keys

Async Components

URL: https://vuejs.org/guide/components/async.html

• Basic usage
• Loading and error states
• Using with Suspense

---

Reusability

Composables

URL: https://vuejs.org/guide/reusability/composables.html

• What is a composable?
• Mouse tracker example
• Async state example
• Conventions and best practices
• Usage restrictions
• Extracting composables

Custom Directives

URL: https://vuejs.org/guide/reusability/custom-directives.html

• Introduction
• Directive hooks
• Hook arguments
• Function shorthand
• Object literals
• Usage on components

Plugins

URL: https://vuejs.org/guide/reusability/plugins.html

• Introduction
• Writing a plugin
• Plugin options
• Provide / inject with plugins

---

Built-in Components

Transition

URL: https://vuejs.org/guide/built-ins/transition.html

• Basic usage
• CSS-based transitions
• TypeScript hooks
• Reusable transitions
• Appear on initial render
• Transition between elements
• Transition modes

TransitionGroup

URL: https://vuejs.org/guide/built-ins/transition-group.html

• Basic usage
• Move transitions
• Staggering list transitions

KeepAlive

URL: https://vuejs.org/guide/built-ins/keep-alive.html

• Basic usage
• Include / exclude
• Max cached instances
• Lifecycle of cached instance

Teleport

URL: https://vuejs.org/guide/built-ins/teleport.html

• Basic usage
• Using with components
• Multiple teleports on same target
• Disabling teleport

Suspense

URL: https://vuejs.org/guide/built-ins/suspense.html

• Async dependencies
• Loading state
• Error handling
• Combining with Transitions
• Note: Experimental feature

---

API Reference

Global API

URL: https://vuejs.org/api/application.html

• Application API
• General API

Composition API - Setup

URL: https://vuejs.org/api/composition-api-setup.html

• setup() function
• <script setup> syntax

Composition API - Reactivity Core

URL: https://vuejs.org/api/reactivity-core.html

• ref(), computed(), reactive(), readonly()
• watchEffect(), watchPostEffect(), watchSyncEffect()
• watch()
• isRef(), unref(), toRef(), toRefs(), toValue()
• isProxy(), isReactive(), isReadonly()

Composition API - Reactivity Utilities

URL: https://vuejs.org/api/reactivity-utilities.html

• isRef(), unref(), toRef(), toRefs(), toValue()
• isProxy(), isReactive(), isReadonly()
• shallowRef(), triggerRef(), customRef()
• shallowReactive(), shallowReadonly()

Composition API - Reactivity Advanced

URL: https://vuejs.org/api/reactivity-advanced.html

• shallowRef(), triggerRef(), customRef()
• shallowReactive(), shallowReadonly()
• toRaw(), markRaw()
• effectScope(), getCurrentScope(), onScopeDispose()

Composition API - Lifecycle Hooks

URL: https://vuejs.org/api/composition-api-lifecycle.html

• onMounted(), onUpdated(), onUnmounted()
• onBeforeMount(), onBeforeUpdate(), onBeforeUnmount()
• onErrorCaptured(), onRenderTracked(), onRenderTriggered()
• onActivated(), onDeactivated(), onServerPrefetch()

Composition API - Dependency Injection

URL: https://vuejs.org/api/composition-api-dependency-injection.html

• provide(), inject()
• hasInjectionContext()

Composition API - Helpers

URL: https://vuejs.org/api/composition-api-helpers.html

• useAttrs(), useSlots()
• useModel(), useTemplateRef()
• useId(), useCssModule()

Options API - State

URL: https://vuejs.org/api/options-state.html

• data, props, computed
• methods, watch, emits
• expose

Options API - Rendering

URL: https://vuejs.org/api/options-rendering.html

• template, render
• compilerOptions

Options API - Lifecycle

URL: https://vuejs.org/api/options-lifecycle.html

• beforeCreate, created
• beforeMount, mounted
• beforeUpdate, updated
• beforeUnmount, unmounted
• errorCaptured, renderTracked, renderTriggered
• activated, deactivated, serverPrefetch

Options API - Composition

URL: https://vuejs.org/api/options-composition.html

• provide, inject
• mixins, extends

Options API - Misc

URL: https://vuejs.org/api/options-misc.html

• name, inheritAttrs, components, directives

Component Instance

URL: https://vuejs.org/api/component-instance.html

• $data, $props, $el, $refs
• $parent, $root, $slots, $attrs
• $watch(), $emit(), $forceUpdate(), $nextTick()

Built-in Directives

URL: https://vuejs.org/api/built-in-directives.html

• v-text, v-html, v-show, v-if, v-else, v-else-if, v-for
• v-on, v-bind, v-model
• v-slot, v-pre, v-once, v-memo, v-cloak

Built-in Components

URL: https://vuejs.org/api/built-in-components.html

• <Transition>, <TransitionGroup>
• <KeepAlive>, <Teleport>, <Suspense>

Built-in Special Elements

URL: https://vuejs.org/api/built-in-special-elements.html

• <component>, <slot>

Built-in Special Attributes

URL: https://vuejs.org/api/built-in-special-attributes.html

• key, ref, is

Single-File Component Syntax

URL: https://vuejs.org/api/sfc-syntax.html

• Language blocks
• Automatic name inference
• Pre-processors
• Src imports
• Custom blocks

SFC <script setup>

URL: https://vuejs.org/api/sfc-script-setup.html

• Basic syntax
• Top-level bindings
• Using components
• Using custom directives
• defineProps(), defineEmits()
• defineExpose(), defineOptions(), defineSlots(), defineModel()
• useSlots(), useAttrs()
• Normal <script> alongside <script setup>

SFC CSS Features

URL: https://vuejs.org/api/sfc-css-features.html

• Scoped CSS
• CSS modules
• v-bind() in CSS
• <style> with src imports

---

TypeScript Patterns

TypeScript with Composition API

URL: https://vuejs.org/guide/extras/composition-api-faq.html

• Define props with runtime object syntax
• Define emits with array/object syntax
• Use JSDoc for complex shapes
• Keep composables in use*.ts
• Prefer clear runtime validation for public component APIs

TypeScript with Options API

URL: https://vuejs.org/guide/essentials/component-basics.html

• Use props runtime validation
• Keep event names explicit in emits
• Avoid implicit global properties where possible
• Prefer composition API for new code

Overview

URL: https://vuejs.org/guide/scaling-up/tooling.html

• IDE support
• Linting and formatting integration
• Volar extension basics
• Build-tool and plugin usage notes

---

Additional Resources

Best Practices

URL: https://vuejs.org/guide/best-practices/production-deployment.html

• Production deployment
• Performance
• Accessibility
• Security

Scaling Up

URL: https://vuejs.org/guide/scaling-up/sfc.html

• Single-File Components
• Tooling
• Routing
• State management
• Testing
• Server-Side Rendering (SSR)

Style Guide

URL: https://vuejs.org/style-guide/

• Priority A: Essential (Error Prevention)
• Priority B: Strongly Recommended
• Priority C: Recommended
• Priority D: Use with Caution

Vue Router

URL: https://router.vuejs.org/

• Official routing library

Pinia

URL: https://pinia.vuejs.org/

• Official state management library

Vite

URL: https://vitejs.dev/

• Recommended build tool

---

Quick Search Tips

When searching official docs:

1. Use the search bar at https://vuejs.org
2. For API details, go directly to https://vuejs.org/api/
3. For guides and concepts, start at https://vuejs.org/guide/
4. For examples, check https://vuejs.org/examples/

All documentation is available in multiple languages using the language selector.