Suggest an edit

Improve this article

Refine the answer for “Can Composition API be used together with the Options 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, Composition API can be used together with the Options API, and this is fully supported by Vue 3.**
This is called a **hybrid approach**.

Vue 3 lets you use:

- options (`data`, `methods`, `computed`, `mounted`, etc.)
- and Composition API functions at the same time (`setup`, `ref`, `reactive`, `onMounted`, etc.)

in the same component.

---

## What does this look like?

```vue
<script>
import { ref, onMounted } from 'vue'

export default {
  data() {
    return {
      title: 'Options API'
    }
  },

setup() {
    const count = ref(0)

onMounted(() => {
      console.log("mounted from Composition API")
    })

return { count }
  },

mounted() {
    console.log("mounted from Options API")
  }
}
</script>

<template>
  <h1>{{ title }}</h1>
  <p>Counter: {{ count }}</p>
</template>
```

This works without issues.

---

## Important nuances of the hybrid approach

### 1. `setup()` **runs before the Options API hooks**

Initialization order:

1. `setup()`
2. `beforeCreate` (from Options API)
3. `created`
4. `beforeMount`
5. `mounted`

---

### 2. **Variables from** `setup` **are available in the template**

Through `return`:

```js
setup() {
  const message = ref('Hello')
  return { message }
}
```

---

### 3. **You cannot access setup's variables through this inside the Options API**

Wrong:

```js
mounted() {
  console.log(this.count) // undefined
}
```

This is expected, the Composition API *is not tied* to `this`.

But the variable is available in the template and from setup.

---

### 4. **You can use watch/computed in either API**

Both variants work:

```js
computed: {
  fullName() { ... }
}

const computedName = computed(() => ... )
```

---

### 5. **Use the hybrid approach in moderation**

Although this is possible, the Vue team recommends:

- for simple components → Options API
- for complex logic → Composition API
- not mixing the two APIs haphazardly

The hybrid approach is useful when **migrating from Vue 2 to Vue 3**.

---

## Summary (great for interviews)

> **Yes, Composition API can be used together with the Options API.**
> **Vue 3 fully supports the hybrid approach.**
> `setup()` **runs first, and its variables are available in the template, but not through** `this`**.**
> **This approach is often used when migrating from Vue 2 or in components where you need to gradually move to the Composition API.**

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.