Suggest an edit

Improve this article

Refine the answer for “Can you mix the Options API and the Composition API?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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

```vue
<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:

1. **setup()**
2. beforeCreate
3. created
4. beforeMount
5. mounted

---

### 2. Values from setup are NOT available via `this`

In the Options API:

```js
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 via** `this`**, 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.**

Markdown · drag & drop images · ⌘B / ⌘I shortcuts379 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.