Different strokes – options, composition, and script setup API

The classical way to describe a component in Vue 2 has been branded as the Options API. To maintain backward compatibility, the same syntax is also supported in Vue 3. However, there is also a new syntax named the Composition API, which is what we will use in this book.

The Options API is inherited from Vue 2 and prescribes that a component is defined by an object with defined fields, none of which is actually mandatory. Moreover, some of them have defined parameters and expected outputs. For example, these are the most common fields to use (also, a non-exclusive list):

• data should be a function that returns an object whose fields would become reactive variables.
• methods is an object that contains our functions. These functions have access to the reactive variables from data by using the this.variableName format.
• components is an object where each field provides a name for the template, and the...