Vue offers two main API styles for organizing component logic. The traditional Options API organizes code into predefined options such as data() for reactive state, methods for functions, computed for derived values, watch for side effects, and lifecycle hooks like mounted(). This approach is intuitive for newcomers because each concern has a designated place in the component definition, and it remains fully supported in Vue 3.
The Composition API, introduced and recommended in Vue 3, takes a different approach by exposing function-based APIs such as ref, reactive, computed, watch, and lifecycle hooks that can be composed freely. This style is used inside a setup() function or, more commonly, inside the script setup block. The advantage of the Composition API is that it lets you group related logic by feature rather than by option type, which makes complex components easier to read and reason about, and it pairs naturally with TypeScript. Both styles are fully supported, and you can even mix them within the same project depending on the needs of each component.
The script setup syntax is a compile-time syntactic sugar layered on top of the Composition API. Inside this block, every top-level binding—including variables, functions, and imports—is automatically exposed to the template without needing to be returned from a setup() function. This dramatically reduces boilerplate, especially for component props and emits which are declared through the compiler macros defineProps and defineEmits. As a result, script setup has become the default and most ergonomic way to write Vue 3 components.