What Is the Vue Options API?

Vue's Options API is a way of defining Vue components. It has been the basic way to define components since Vue's first versions. When you create a component you define various options that describe how it behaves: its data, props, computed properties, methods, lifecycle hooks and more.

Some of the main options:

1. Data: the component's reactive data, which updates the user interface dynamically.
2. Methods: the component's methods, for example event handlers.
3. Computed: computed properties — new reactive values derived from other data.
4. Watch: watches specific data or computed properties and runs a function when they change.
5. Props: data passed in from outside, important for passing data from parent to child.
6. Lifecycle hooks: functions that run at various stages of the component's life (for example created, mounted, updated, destroyed).
7. Components: the child components used inside this component.
8. Directives: custom Vue directives.
9. Filters: text-formatting filters (removed in Vue 3).

The Options API is the foundation of Vue and offers a simple, understandable structure. Vue 3 introduced the Composition API as well, but the Options API is still widely used: the Composition API gives larger, more complex applications more flexibility and organisation, while the Options API is a good choice for getting started simply and quickly.

Note (Vue 3): In Vue 3 the destroyed hook was renamed to unmounted, and beforeDestroy to beforeUnmount.