Vue 3 Composition API
Vue 3's function-based API for organizing component logic by feature instead of by option type
The Composition API is a set of function-based APIs introduced in Vue 3, most notably setup(), ref(), and reactive(), that let developers organize a component's logic by feature rather than by the Options API's fixed data/methods/computed…
Definition
The Composition API is a set of function-based APIs introduced in Vue 3, most notably setup(), ref(), and reactive(), that let developers organize a component's logic by feature rather than by the Options API's fixed data/methods/computed structure.
Overview
Vue's original Options API organizes a component into fixed buckets — `data`, `methods`, `computed`, `watch`, lifecycle hooks — which works well for small components but tends to scatter the logic for a single feature across multiple sections as a component grows. The Composition API, introduced as an addition (not a replacement) in Vue 3, addresses this by exposing Vue's reactivity system directly as importable functions that can be composed freely inside a `setup()` function or, more commonly today, inside `<script setup>` blocks in single-file components. At its core are `ref()`, which wraps a primitive value in a reactive container accessed via `.value`, and `reactive()`, which makes an entire object deeply reactive without needing `.value` access. Derived state uses `computed()`, and side effects respond to state changes through `watch()` and `watchEffect()`. Because these are plain functions rather than object properties, related logic — the state, computed values, and methods for one feature — can live together in one place, and can be extracted into standalone, reusable functions called composables, which is the Composition API's rough equivalent to React hooks and is explicitly the pattern that influenced its design. The Composition API was also driven by TypeScript support: the Options API's `this`-based context is difficult for TypeScript to infer correctly, while function-based composables type naturally. `<script setup>`, added shortly after Vue 3's release, further reduces boilerplate by making everything declared in the block automatically available to the template, without an explicit `return` statement or `setup()` wrapper. The Options API remains fully supported in Vue 3 for teams that prefer it or have large existing codebases, and the two can even be mixed within the same application, though official guidance and most new library documentation now default to Composition API examples.
Key Concepts
- ref() and reactive() as function-based reactivity primitives
- Logic organized by feature rather than by option type (data/methods/computed)
- computed(), watch(), and watchEffect() for derived state and side effects
- <script setup> syntax that eliminates boilerplate around setup()
- Composables: reusable functions bundling stateful logic, similar to React hooks
- Improved TypeScript inference compared to the Options API's this-based context
- Fully interoperable with the Options API within the same Vue 3 application
- Powers Vue 3's reactivity system used across Nuxt and standalone Vue apps