Can you mix the Options API and the Composition API?
Yes, mixing the Options API and the Composition API is possible, and it is fully supported in Vue 3. This approach is called the hybrid approach, a mixed style of writing a component.
Vue 3 deliberately keeps the Options API in order to:
- provide a smooth migration path from Vue 2,
- let developers combine both styles wherever convenient.
What a mixed component looks like
<script>
import { ref, onMounted } from 'vue'
export default {
data() {
return {
title: 'Options API'
}
},
setup() {
const count = ref(0)
onMounted(() => {
console.log('mounted (Composition API)')
})
return { count }
},
mounted() {
console.log('mounted (Options API)')
}
}
</script>
<template>
<h1>{{ title }}</h1>
<p>Count: {{ count }}</p>
</template>Works without any issues. Values from setup are available in the template. Hooks from both APIs are called.
IMPORTANT POINTS
1. setup() runs earlier than the Options API hooks
Call order:
- setup()
- beforeCreate
- created
- beforeMount
- mounted
2. Values from setup are NOT available via this
In the Options API:
mounted() {
console.log(this.count) // undefined
}In the template, it is available
In setup, it is available
In this, it is not
Because the Composition API does not use this.
3. You can mix them, but it is better to do so deliberately
When mixing is good:
- migrating from Vue 2 to Vue 3
- the component is too large to rewrite all at once
- part of the logic is simpler in the Options API, part in the Composition API
When mixing is bad:
- a new component
- the logic becomes tangled
- part of the logic is in setup, part in data/methods, causing chaos
The Vue team recommends:
writing new components entirely in the Composition API, and mixing only when necessary.
Summary (perfect for an interview)
Yes, Vue 3 lets you mix the Options API and the Composition API in one component.
setup()is called first; values from setup are not available viathis, but they are available in the template. Mixing is used during migration and gradual transition, but in new components the Composition API is the preferred choice.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.