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)

### What is the Options API in Vue.js

The **Options API** is the traditional way of writing Vue.js components, where the component's logic is described through an object with options:
`data`, `methods`, `computed`, `watch`, `props`, `components`, and so on.

This approach has existed since the earliest versions of Vue (2.x) and is still supported in Vue 3.

---

## Example component with the Options API

```javascript
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

data() {
    return {
      count: 0
    }
  },

methods: {
    increment() {
      this.count++
    }
  }
}
</script>
```

Here the component is declared through an object:

- `data()` returns the state (reactive data);
- `methods` contains the component's methods;
- `this` refers to the component instance.

---

## Main "options" of the Options API

| Option | Purpose |
|---|---|
| `data()` | Returns an object with the component's reactive data |
| `props` | Defines the input parameters from the parent |
| `methods` | Contains functions and event handlers |
| `computed` | Computed properties (cached automatically) |
| `watch` | Reacts to changes in specific data |
| `components` | Registration of nested components |
| `mounted`, `created`, etc. | Component lifecycle hooks |

---

## Example with several options

```javascript
<script>
export default {
  props: ['initial'],

data() {
    return {
      count: this.initial
    }
  },

computed: {
    doubled() {
      return this.count * 2
    }
  },

watch: {
    count(newVal) {
      console.log('Count changed:', newVal)
    }
  },

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

mounted() {
    console.log('Component mounted!')
  }
}
</script>
```

---

## Difference from the Composition API

| Feature | **Options API** | **Composition API** |
|---|---|---|
| Style | Object with sections (`data`, `methods`, `computed`) | Logic is described directly in `<script setup>` or `setup()` |
| Context | Uses `this` | Uses plain JS variables |
| Flexibility | Simpler for small components | Scales better in large projects |
| Vue version | Main approach up to Vue 3 | New standard as of Vue 3 |

---

## When to use the Options API

Well suited:

- for **small components**;
- if you are **just starting with Vue**;
- if the project is built on **Vue 2** and is gradually migrating to 3.

Less convenient:

- when the logic is complex and split across many options, the code becomes fragmented;
- when logic needs to be **reused** between components (in the Composition API this is easier via composables).

---

### Summary

> The **Options API** is a declarative way of describing a component through an object with options (`data`, `methods`, `computed`, etc.).
> It is easy to learn and convenient for small projects, but **less flexible** than the **Composition API** introduced in Vue 3.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.