Why Composition API?
Limitations of Options API, logic reuse problem, Composition API advantages.
Why Composition API? is a free Vue Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The Two Ways to Write Vue
Vue 3 gives you two styles for authoring component logic: the Options API and the Composition API. Both produce the same end result, but they organize code very differently.
Understanding the trade-offs helps you pick the right tool and read existing codebases with confidence.
How the Options API Organizes Code
The Options API splits a component into fixed sections: data, computed, methods, watch, and lifecycle hooks. Each piece of a feature lives in a different section.
For one small feature you might touch four separate blocks of the file.
export default {
data() {
return { count: 0 }
},
computed: {
doubled() { return this.count * 2 }
},
methods: {
increment() { this.count++ }
}
}The Problem: Concerns Get Scattered
When a component grows, logic for a single concern (say, a search box) is spread across data, methods, computed, and watch. You constantly scroll up and down to follow one feature.
This is called the fragmentation problem.
Composition API: Group by Feature
The Composition API lets you place all the code for one logical concern together. Reactive state, derived values, and the functions that change them sit side by side.
You read top to bottom and see a whole feature in one place.
import { ref, computed } from 'vue'
export default {
setup() {
const count = ref(0)
const doubled = computed(() => count.value * 2)
function increment() { count.value++ }
return { count, doubled, increment }
}
}Side by Side
Notice how the second example keeps count, its derived doubled, and increment together. In the Options API the same three pieces lived in three separate sections.
- Options API: organized by option type
- Composition API: organized by logical concern
Reusing Logic: Mixins (the Old Way)
Before Composition API, the main reuse tool was mixins. A mixin merges its options into a component.
But mixins have real problems: naming collisions, unclear sources of properties, and implicit dependencies between mixins.
const counterMixin = {
data() { return { count: 0 } },
methods: { increment() { this.count++ } }
}
export default {
mixins: [counterMixin]
// Where did count come from? Not obvious.
}Reusing Logic: Composables (the New Way)
A composable is just a function that uses reactivity APIs and returns reactive state. You call it like any function, so the source of every value is explicit.
No magic merging, no hidden name clashes.
import { ref } from 'vue'
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}Using a Composable
Importing and calling the composable makes it obvious that count and increment come from useCounter. You can even rename them on destructure to avoid collisions.
import { useCounter } from './useCounter'
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}Why Composables Beat Mixins
- Explicit sources — every value comes from a visible function call.
- No name clashes — destructure and rename freely.
- Composable — one composable can call another.
- Type friendly — TypeScript infers returned types automatically.
Better TypeScript and Tooling
Because Composition API is built from plain functions and variables, TypeScript can infer types without special tooling. There is no this with a hand-written type to maintain, and editors give accurate autocomplete.
When to Use Which
The Composition API shines for medium and large components and any logic you want to reuse. The Options API is still perfectly valid and can read well for tiny components.
New Vue 3 code generally favors Composition API, especially with <script setup> which you will meet soon.
Quick Check
Test what you learned about why the Composition API exists.
Recap
In this lesson you learned:
- The Options API organizes code by option type, which scatters a feature across sections.
- The Composition API groups code by logical concern.
- Mixins reuse logic but cause name clashes and hidden sources.
- Composables are plain functions that return reactive state — explicit, collision-free, and composable.
Frequently asked questions
Is the “Why Composition API?” lesson free?
Yes — the full text of “Why Composition API?” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.
What will I learn in “Why Composition API?”?
Limitations of Options API, logic reuse problem, Composition API advantages. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Why Composition API?” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.