What is the Composition API?

VueJunior~2 min read

The Composition API is a modern way of writing components in Vue 3 that lets you organize logic flexibly using plain JavaScript functions and variables, without splitting code across options (data, methods, computed, and so on).

Main idea

Instead of describing a component as an object (Options API), we describe all of its logic inside a function called setup() or, more often, inside <script setup>.

The Composition API solves the problem of code fragmentation, where in large components the logic of a single process used to be "scattered" across different sections (data, computed, methods, watch).

A component example with the Composition API

javascript

<template>
  <div>
    <p>Counter: {{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

Here everything is simple:

ref() creates a reactive variable;
count.value is the current value;
the increment() function changes the state;
the template updates automatically whenever count changes.

Core elements of the Composition API

Concept	Description
`setup()` / `<script setup>`	Entry point for the component's logic
`ref()`	Creates a reactive value (for primitives)
`reactive()`	Makes an object reactive
`computed()`	Creates a computed value
`watch()`	Reacts to data changes
`onMounted()`, `onUnmounted()`	Lifecycle hooks
`defineProps()`, `defineEmits()`	Declare input props and events
`provide()` / `inject()`	Passes dependencies down the component tree
`composables`	Functions for reusing logic (analogous to hooks in React)

Comparison with the Options API

Criterion	Options API	Composition API
Code organization	Split across options (`data`, `methods`, `computed`)	Grouped by logic and functions
Context	Uses `this`	Uses plain variables
Logic reuse	Via mixins (less convenient)	Via composable functions
TypeScript support	Limited	Excellent, thanks to static analysis
Scalability	Good for small components	Excellent for complex projects
Learning curve	Easier for beginners	Requires a basic understanding of reactivity and JS

Example: `reactive`, `computed`, `watch`

javascript

<script setup>
import { reactive, computed, watch } from 'vue'

const state = reactive({ count: 0 })

const doubled = computed(() => state.count * 2)

watch(() => state.count, (newVal) => {
  console.log('Count changed:', newVal)
})

function increment() {
  state.count++
}
</script>

Composable function example

A composable is simply a JS function that uses the Composition API to build logic that can be reused.

javascript

// useCounter.js
import { ref } from 'vue'

export function useCounter(initial = 0) {
  const count = ref(initial)
  const increment = () => count.value++
  const reset = () => (count.value = 0)
  return { count, increment, reset }
}

javascript

<script setup>
import { useCounter } from './useCounter'

const { count, increment, reset } = useCounter(10)
</script>

Advantages of the Composition API

Flexibility and scalability - convenient for grouping code into logical blocks Better logic reuse - through composables Excellent TypeScript support Less "magic" - uses plain JS Compatible with the Options API - the two approaches can be mixed

Summary

The Composition API is a new way of writing components in Vue 3 that lets you use plain functions and variables to describe reactive logic.

It makes code more flexible, reusable, and scalable, especially in large applications.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.