Suggest an edit

Improve this article

Refine the answer for “What is 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)

The **Options API** is the traditional way of writing components in Vue (it was the default in Vue 2 and is still available in Vue 3).
In this approach, all of a component's logic is split across **options**:

- `data`
- `methods`
- `computed`
- `watch`
- `props`
- `mounted`, `created`, and other hooks
- `components`
- `filters` (in Vue 2)
- and so on

In simple terms:

> **The Options API is a way of declaring a component where each type of logic goes into its own block.**

---

## Example component using the Options API

```vue
<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

computed: {
    double() {
      return this.counter * 2
    }
  },

methods: {
    increment() {
      this.counter++
    }
  },

mounted() {
    console.log("Component mounted")
  }
}
</script>

<template>
  <button @click="increment">Count: {{ counter }} (x2: {{ double }})</button>
</template>
```

---

## The core idea of the Options API

All of a component's code is split **by type**, not by functionality:

- `data()` holds only the data
- `methods` holds the methods
- `computed` holds the computed properties
- `watch` holds the watchers
- `mounted` holds the code that runs on mount

This is convenient for simple components, but in large ones the logic belonging to one functional block ends up **scattered across the file**.

---

## Advantages of the Options API

### Good for beginners

The logic is structured "into its own shelves".

### Great for small components

A simple, clear, and readable approach.

### Easy to read when the component is small

Because everything is where you expect it to be.

### Compatible with Vue 3

The Options API is fully supported in Vue 3.

---

## Disadvantages of the Options API (why the Composition API was invented)

### Logic gets smeared across different sections

As a component grows, working with it gets harder.

### Poorly suited to reusing logic

You had to use mixins, which brought:

- name conflicts
- hidden magic
- poor readability

### Harder to organize complex components

You need to jump around the file between data/methods/computed/watch/mounted…

---

## Summary (great for an interview)

> **The Options API is the classic way of describing components in Vue, using an object with options (**`data`**,** `methods`**,** `computed`**,** `watch`**, etc.).**
> **Easy to learn, convenient for small components, fully supported in Vue 3, but scales poorly, which is why the more flexible Composition API appeared.**

---

If you want, I can give a comparison of the Options API vs the Composition API, or explain when each approach is best to use.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.