Vue.js (Composition API) Documentation

Attributes

• is
• key
• ref

Components

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

Directives

• v-bind
• v-bind() in CSS
• v-cloak
• v-else
• v-else-if
• v-for
• v-html
• v-if
• v-memo
• v-model
• v-on
• v-once
• v-pre
• v-show
• v-slot
• v-text

Guides

• <script setup>
• API Reference
• Accessibility
• Animation Techniques
• Application API
• Async Components
• Built-in Components
• Built-in Directives
• Built-in Special Attributes
• Built-in Special Elements
• Class and Style Bindings
• Compile-Time Flags
• Component Events
• Component Instance
• Component Registration
• Component v-model
• Components Basics
• Composables
• Composition API FAQ
• Composition API: Dependency Injection
• Composition API: Helpers
• Composition API: Lifecycle Hooks
• Composition API: setup()
• Computed Properties
• Conditional Rendering
• Creating a Vue Application
• Custom Directives
• Custom Elements API
• Custom Renderer API
• Event Handling
• Fallthrough Attributes
• Form Input Bindings
• Global API: General
• Introduction
• KeepAlive
• Lifecycle Hooks
• List Rendering
• Options: Composition
• Options: Lifecycle
• Options: Misc
• Options: Rendering
• Options: State
• Performance
• Plugins
• Production Deployment
• Props
• Provide / Inject
• Quick Start
• Reactivity API: Advanced
• Reactivity API: Core
• Reactivity API: Utilities
• Reactivity Fundamentals
• Reactivity Transform
• Reactivity in Depth
• Render Function APIs
• Render Functions & JSX
• Rendering Mechanism
• Routing
• SFC CSS Features
• SFC Syntax Specification
• Security
• Server-Side Rendering (SSR)
• Server-Side Rendering API
• Single-File Components
• Slots
• State Management
• Suspense
• Teleport
• Template Refs
• Template Syntax
• Testing
• Tooling
• Transition
• TransitionGroup
• TypeScript with Composition API
• TypeScript with Options API
• Using Vue with TypeScript
• Utility Types
• Vue and Web Components
• Watchers
• Ways of Using Vue

Methods

• $attrs
• $data
• $el
• $emit()
• $forceUpdate()
• $nextTick()
• $options
• $parent
• $props
• $refs
• $root
• $slots
• $watch()
• <component>
• <slot>
• <template>
• __VUE_OPTIONS_API__
• __VUE_PROD_DEVTOOLS__
• __VUE_PROD_HYDRATION_MISMATCH_DETAILS__
• activated
• app.component()
• app.config
• app.config.compilerOptions
• app.config.errorHandler
• app.config.globalProperties
• app.config.idPrefix
• app.config.optionMergeStrategies
• app.config.performance
• app.config.throwUnhandledErrorInProduction
• app.config.warnHandler
• app.directive()
• app.mixin()
• app.mount()
• app.onUnmount()
• app.provide()
• app.runWithContext()
• app.unmount()
• app.use()
• app.version
• beforeCreate
• beforeMount
• beforeUnmount
• beforeUpdate
• cloneVNode()
• compilerOptions
• components
• computed
• computed()
• createApp()
• createRenderer()
• createSSRApp()
• created
• customRef()
• data
• data-allow-mismatch
• deactivated
• defineAsyncComponent()
• defineComponent()
• defineCustomElement()
• defineExpose()
• defineModel()
• defineOptions()
• defineProps() & defineEmits()
• defineSlots()
• directives
• effectScope()
• emits
• errorCaptured
• expose
• extends
• getCurrentScope()
• h()
• hasInjectionContext()
• inheritAttrs
• inject
• inject()
• isProxy()
• isReactive()
• isReadonly()
• isRef()
• isVNode()
• markRaw()
• mergeProps()
• methods
• mixins
• mounted
• name
• nextTick()
• onActivated()
• onBeforeMount()
• onBeforeUnmount()
• onBeforeUpdate()
• onDeactivated()
• onErrorCaptured()
• onMounted()
• onRenderTracked()
• onRenderTriggered()
• onScopeDispose()
• onServerPrefetch()
• onUnmounted()
• onUpdated()
• onWatcherCleanup()
• pipeToNodeWritable()
• pipeToWebWritable()
• props
• provide
• provide()
• reactive()
• readonly()
• ref()
• render
• renderToNodeStream()
• renderToSimpleStream()
• renderToString()
• renderToWebStream()
• renderTracked
• renderTriggered
• resolveComponent()
• resolveDirective()
• serverPrefetch
• shallowReactive()
• shallowReadonly()
• shallowRef()
• slots
• src Imports
• template
• this.$host
• toRaw()
• toRef()
• toRefs()
• toValue()
• triggerRef()
• unmounted
• unref()
• updated
• useAttrs()
• useHost()
• useId()
• useModel()
• useSSRContext()
• useShadowRoot()
• useSlots()
• useSlots() & useAttrs()
• useTemplateRef()
• version
• vue-cli
• watch
• watch()
• watchEffect()
• watchPostEffect()
• watchSyncEffect()
• webpack
• withDirectives()
• withModifiers()

Sections

• .lazy
• .number
• .trim
• <script setup>
• API Design Trade-Offs
• API Styles
• API-Specific Recipes
• Access to Platform-Specific APIs
• Accessing Event Argument in Inline Handlers
• Accessing Fallthrough Attributes in JavaScript
• Accessing Props
• Accessing the Refs
• Additional Ref Unwrapping Details
• Animating with Watchers
• App Configurations
• App-level Provide
• Array Change Detection
• As Reactive Object Property
• Async Components
• Async Dependencies
• Async State Example
• Attribute Bindings
• Attribute Inheritance
• Attribute Inheritance on Multiple Root Nodes
• Augmenting Custom Options
• Augmenting Global Properties
• Automatic Name Inference
• Avoid Unnecessary Component Abstractions
• Backend Coordination
• Basic Example
• Basic Example
• Basic Syntax
• Basic Tutorial
• Basic Usage
• Basic Usage
• Basic Usage
• Basic Usage
• Basic Usage
• Basic Usage
• Basic Usage
• Best Practices
• Best Practices
• Better Logic Reuse
• Better Type Inference
• Beyond the Web
• Binding HTML Classes
• Binding Inline Styles
• Boolean Casting
• Browser Devtools
• Building Custom Elements with Vue
• Built-in Components
• Bundle Size and Tree-shaking
• CSS Modules
• CSS-Based Transitions
• CSSProperties
• Callback Flush Timing
• Calling Methods in Inline Handlers
• Can I use both APIs in the same component?
• Caveat in Arrays and Collections
• Caveat when Unwrapping in Templates
• Checkbox
• Choosing the Right Architecture
• Class-based Animations
• Client Hydration
• Client-Side vs. Server-Side Routing
• Code Splitting
• Code Structure
• Combining with Other Components
• Comments
• Comparison with React Hooks
• Comparisons with Other Techniques
• Compiler-Informed Virtual DOM
• Component Debugging Hooks
• Component Lifecycle Hooks
• Component Name Casing
• Component Testing
• ComponentCustomOptions
• ComponentCustomProperties
• ComponentCustomProps
• Components
• Computed Caching vs. Methods
• Computed Debugging
• Computed Stability
• Conditional Slots
• Configuration Guides
• Configuring tsconfig.json
• Connection to Signals
• Content Distribution with Slots
• Content Structure
• Conventions and Best Practices
• Convert Existing Refs to Reactive Variables with $()
• Creating Vnodes
• Creating a Vue Application
• Cross-Request State Pollution
• Custom Directives
• Custom Directives
• DOM Update Timing
• Declaring Emitted Events
• Declaring Reactive State
• Declaring Render Functions
• Deep Reactivity
• Deep Watchers
• Deferred Teleport
• Defining a Component
• Destructuring with $()
• Development vs. Production
• Differences from <Transition>
• Directive Hooks
• Directives
• Disabling Attribute Inheritance
• Disabling Teleport
• Displaying Filtered/Sorted Results
• Does Composition API cover all use cases?
• Dynamic Components
• Dynamic Slot Names
• Dynamic Transitions
• E2E Testing
• Eager Watchers
• Embedded Web Components
• Emitting and Listening to Events
• Enter / Leave Transitions
• Error Handling
• Event Arguments
• Event Modifiers
• Events
• Events Validation
• Explicit Opt-in
• ExtractPropTypes<T>
• ExtractPublicPropTypes<T>
• Extracting Composables for Code Organization
• Fallback Content
• Formatting
• Fullstack / SSR
• Function Refs
• Function Shorthand
• Functional Components
• Further Reading
• General Optimizations
• General Usage Notes
• Generic Components
• Generics
• Getting the Previous Value
• Global Registration
• Handling v-model modifiers
• Higher Level Solutions
• How It Works
• How Reactivity Works in Vue
• Hydration Mismatch
• IDE Support
• IDE Support
• Immutable Data
• Impact on SSR Hydration
• Import Statements
• Include / Exclude
• Inject
• Inline Handlers
• Integration with External State Systems
• Introduction
• Introduction
• Introduction
• JAMStack / SSG
• JSX / TSX
• JSX Type Inference
• JavaScript Hooks
• Key Modifiers
• Language Blocks
• Lazy Hydration
• Lifecycle Diagram
• Lifecycle of Cached Instance
• Limitations of reactive()
• Linting
• Listening to Events
• Listening to Events
• Loading State
• Loading and Error States
• Local Registration
• Lower-Level Packages
• Maintaining State with key
• Max Cached Instances
• MaybeRef<T>
• MaybeRefOrGetter<T>
• Method Handlers
• Modifiers
• More Flexible Code Organization
• Mounting the App
• Mouse Button Modifiers
• Mouse Tracker Example
• Move Transitions
• Multiline text
• Multiple Teleports on the Same Target
• Multiple application instances
• Multiple v-model bindings
• Named Slots
• Nested Component Inheritance
• Nested Suspense
• Next Steps
• Non-Vue Web Components and TypeScript
• Note on Vue CLI and ts-loader
• Nuxt
• Object Literals
• Official Router
• Once Watchers
• One-Way Data Flow
• Other Online Playgrounds
• Overview
• Overview
• Overview
• Overview
• Overview
• Page Load Optimizations
• Passing Props
• Passing Slots
• Patch Flags
• Pick Your Learning Path
• Pinia
• Potential Dangers
• Pre-Processors
• Profiling Options
• Project Scaffolding
• Project Setup
• Prop Drilling
• Prop Passing Details
• Prop Validation
• PropType<T>
• Props Declaration
• Props Stability
• Provide
• Quasar
• Radio
• Raw HTML
• Reactive Props Destructure
• Reactive Props Destructure
• Reactive Proxy vs. Original
• Reactivity
• Reactivity Debugging
• Reactivity on the Server
• Recipes
• Reduce Reactivity Overhead for Large Immutable Structures
• Ref on Component
• Refs inside v-for
• Refs vs. Reactive Variables
• Registering Lifecycle Hooks
• Relationship with Class API
• Relationship with Options API
• Render Function Recipes
• Render Pipeline
• Render Scope
• Rendering Slots
• Rendering an App
• Reporting Vulnerabilities
• Resources
• Restrictions
• Retaining Reactivity Across Function Boundaries
• Reusable Transitions
• Rollup
• Rule No.1: Never Use Non-trusted Templates
• Runtime vs. Compile-time Reactivity
• RxJS
• SFC Custom Block Integrations
• SSR Considerations
• SSR vs. SSG
• Scoped CSS
• Scoped Slots
• Scoped Slots
• Select
• Select Options
• Semantic Forms
• Server-Side Rendering (SSR)
• Setup Context
• Side Effect Cleanup
• Simple Routing from Scratch
• Simple State Management with Reactivity API
• Single-File Components
• Single-Page Application (SPA)
• Skip link
• Slot Content and Outlet
• Smaller Production Bundle and Less Overhead
• Staggering List Transitions
• Standalone Script
• Standards
• State Machines
• State-driven Animations
• Static Hoisting
• Still Got Questions?
• Stopping a Watcher
• Teleports
• Template Refs
• Templates vs. Render Functions
• Testing
• Testing Types
• Text
• Text Interpolation
• The <Transition> Component
• The Progressive Framework
• The Root Component
• The application instance
• Top-level await
• Tracking Runtime Errors
• Trade-offs
• Transition Between Components
• Transition Between Elements
• Transition Modes
• Transition on Appear
• Transitions with the Key Attribute
• Tree Flattening
• Try It Online
• Try Vue Online
• TypeScript
• TypeScript Integration
• TypeScript in Templates
• Typing Component Emits
• Typing Component Emits
• Typing Component Props
• Typing Component Props
• Typing Component Template Refs
• Typing Computed Properties
• Typing Event Handlers
• Typing Event Handlers
• Typing Functional Components
• Typing Provide / Inject
• Typing Template Refs
• Typing computed()
• Typing reactive()
• Typing ref()
• Unit Testing
• Update Optimizations
• Usage alongside normal <script>
• Usage in Single-File Components
• Usage on Components
• Usage with Render Functions
• Usage with TSX
• Using Components
• Using Composables in Options API
• Using Custom Directives
• Using Custom Elements in Vue
• Using JavaScript Expressions
• Using Vue from CDN
• Using a Component
• Using with Components
• Using with Suspense
• Value Bindings
• Virtual DOM
• Virtualize Large Lists
• Vite
• Vite SSR
• Vnodes Must Be Unique
• Watcher Debugging
• Web Components vs. Vue Components
• What About Separation of Concerns?
• What Vue Does to Protect You
• What is Composition API?
• What is Reactivity?
• What is SSR?
• What is State Management?
• What is Vue?
• What is a "Composable"?
• When to Test
• When to use custom directives
• Why Composition API?
• Why Refs?
• Why SFC
• Why SSR?
• Why Test?
• Will Options API be deprecated?
• With Build Tools
• Without Build Tools
• Working with Reactivity
• Working with Symbol Keys
• Writable Computed
• Writing SSR-friendly Code
• Writing a Plugin
• async setup()
• class and style Merging
• defineComponent()
• in-DOM Template Parsing Caveats
• reactive()
• ref()
• v-else
• v-else-if
• v-for
• v-for
• v-for on <template>
• v-for with a Component
• v-for with a Range
• v-for with an Object
• v-for with v-if
• v-if
• v-if
• v-if on <template>
• v-if vs. v-show
• v-if with v-for
• v-memo
• v-model
• v-model arguments
• v-model with Components
• v-on
• v-on Listener Inheritance
• v-once
• v-show
• watchEffect()