Vue gives you two ways to write a component. So far you have mostly seen the
Options API, which groups code by type: data,
methods, computed. The Composition API
instead lets you group code by what it does, using plain functions such as
ref, reactive, computed, and
watch.
You will learn the setup() function and the shorter <script setup> syntax, the form most modern Vue code uses, then see them at work in a complete app. This approach is also what makes composables, reusable functions that package stateful logic, possible.
Watch the lessons in order, then continue on to Vue Router.
The Net Ninja looks at the Composition API and its benefits over the Options API.
Going deeper: how to use props in the setup function and how to fetch data with the Composition API.
An easier way to use the Composition API in components with the script setup syntax.
A walkthrough of what you need to know to get started with the script setup pattern for Vue 3 and the Composition API.
The differences between watch and watchEffect in the Composition API, when to use each, and how watchEffect is similar to computed.
Brad Traversy builds an expense tracker with Vue 3 and the Composition API, using the script setup syntax.