What is the Options API?

VueJunior~2 min read

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>

<script>
export default {
  name: 'Counter',

  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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

What is the Options API?