In what API styles can be authored Vue 3 components?
Vue components can be authored in two different API styles: Options API and Composition API.
Could be used both Options and Composition APIs in the same component, in the same App?
Yes. You can use Composition API via the setup() option in an Options API component.
However, we only recommend doing so if you have an existing Options API codebase that needs to integrate with new features / external libraries written with Composition API.
Will Options API be deprecated soon?
No, it’s not true.
No, creators of Vue do not have any plan to deprecate Options API.
Options API is an integral part of Vue and the reason many developers love it. We also realize that many of the benefits of Composition API only manifest in larger-scale projects, and Options API remains a solid choice for many low-to-medium-complexity scenarios.
Options API
With Options API, we define a component’s logic using an object of options such as data, methods, and mounted. Properties defined by options are exposed on this inside functions, which points to the component instance:
<script>
export default {
// Properties returned from data() become reactive state
// and will be exposed on `this`.
data() {
return {
count: 0
}
},
// Methods are functions that mutate state and trigger updates.
// They can be bound as event handlers in templates.
methods: {
increment() {
this.count++
}
},
// Lifecycle hooks are called at different stages
// of a component's lifecycle.
// This function will be called when the component is mounted.
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>Composition API
With Composition API, we define a component’s logic using imported API functions. In SFCs, Composition API is typically used with <script setup>. The setup attribute is a hint that makes Vue perform compile-time transforms that allow us to use Composition API with less boilerplate. For example, imports and top-level variables / functions declared in <script setup> are directly usable in the template.
Here is the same component, with the exact same template, but using Composition API and <script setup> instead:
<script setup>
import { ref, onMounted } from 'vue'
// reactive state
const count = ref(0)
// functions that mutate state and trigger updates
function increment() {
count.value++
}
// lifecycle hooks
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>What is the difference between Options API and Composition API?
Both API styles in Vue are fully capable of handling common use cases and are built on the same core system. In fact, the Options API is built on top of the Composition API, so they share the same fundamental Vue concepts.
The Options API focuses on a “component instance” (using this, as seen in examples) and is more aligned with a class-based, object-oriented programming model, making it easier for those coming from OOP languages. It’s also beginner-friendly, as it abstracts reactivity and organizes code into predefined option groups.
The Composition API, on the other hand, directly declares reactive state variables within a function and allows you to compose state from multiple functions to manage complexity. It offers more flexibility but requires a deeper understanding of Vue’s reactivity system. This flexibility, however, enables more advanced patterns for organizing and reusing logic.
If you’re new to Vue, here’s our general recommendation:
For learning, choose the style that feels easier for you to understand. Since both styles share most of the core concepts, you can always learn the other style later.
For production:
- Use the Options API if you’re not working with build tools or plan to use Vue for simpler scenarios, like progressive enhancement.
- Use the Composition API with Single-File Components if you’re building full-scale applications with Vue.
You don’t need to stick to just one style while learning. The rest of the documentation offers examples in both styles, and you can switch between them anytime using the API Preference toggle at the top of the sidebar.
For what projects is better suited Options API and for what projects is better suited Composition API?
Composition API is better suited for medium or complex full-fledged Apps with routing and complex architecture and logic.
Options API is better choice for small or medium Apps with simple architecture, with no build step, without routing.
