The Composition API

In the previous chapter, we learned how to establish data communication between nesting components using props, refs, and slots.

This chapter will introduce us to a new and scalable approach to writing components with the setup() lifecycle hook – the Composition API. By the end of the chapter, you will be able to write isolated composables (or custom hooks) to reuse in multiple components by using the Composition API with the setup() method, and build a scalable component system for your Vue project beyond the classic Options API.

This chapter covers the following topics:

• Creating components with the setup() lifecycle method
• Working with data
• Understanding composable lifecycle functions
• Creating your composable (custom hook)

Technical requirements

In this chapter, you need to set up a basic Vue project following the instructions in Chapter 1, Starting Your First Vue Project. Creating a single file Vue component is recommended to practice the examples and concepts mentioned easily.

You can find this chapter’s source code here: https://github.com/PacktPublishing/Frontend-Development-Projects-with-Vue.js-3/tree/v2-edition/Chapter05.

Creating components with the setup() lifecycle method

Starting from Vue 3.x, the Vue team has introduced the Composition API as a new way to compose Vue components within the setup() lifecycle method. As mentioned in Chapter 1, Starting Your First Vue Project, setup() is the first hook the Vue engine will run in a component’s lifecycle before the beforeCreate() hook. At this point, Vue hasn’t defined a component instance or any component data.

This lifecycle method runs once before the initialization and creation of a component and is part of the Options API. The Vue team has dedicated setup() to working with Composition API and any custom hooks (composables) written with the Composition API as an alternative approach to creating reactive components besides the Options API.

You can start using the setup() method with the following syntax:

setup(props, context) {
  // ...
  return {
  //...
  }
}

Setup() accepts two arguments...

Working with data

In the Options API, we use the data() method to initialize a component’s local state. By default, all the data properties received from data() are reactive, which can be overkill in many scenarios. Vue has introduced the ref() and reactive() functions, which allow us to decide which local states should be reactive and which shouldn’t be.

Setting a reactive local state with ref()

ref() is a function that accepts a single input parameter as the reactive data’s initial value and returns a reference object for the created reactive data state. We call this reference object a ref object. To start using ref(), you first need to import it from the vue package.

For example, we can create a reactive data called isLightOn, which accepts false as its initial value as follows:

import { ref } from 'vue';
const isLightOn = ref(false);

In the template section, you can access the value of isLightOn in the same way as before, as shown in...

Understanding composable lifecycle functions

In Chapter 1, Starting Your First Vue Project, we learned about the component’s lifecycle and its available hooks in Vue’s Options API. In the Composition API, these lifecycle hooks are now available as standalone functions and need to be imported from the vue package before use.

Generally, the lifecycle functions in the Composition API are similar to the ones from the Options API, with a prefix of on. For example, beforeMount() in the Options API is onBeforeMount() in the Composition API, and so on.

The following is the list of available lifecycle functions from the Composition API, ready to use within the setup() method or <script setup>:

• onBeforeMount(): Before the first render of the component
• onMounted(): After rendering and mounting the component to the DOM
• onBeforeUpdate(): After starting the component’s update process, but before the actual rendering of the updated component
• onUpdated...

Creating your composable (custom hook)

In many scenarios, we want to group some components’ logic into reusable code blocks for other components that share similar functionalities. In Vue 2.x, we use mixins to achieve this goal. However, mixins are not the best practical solution, and they can create code complexity due to the order of merging and invoking overlapping data and lifecycle hooks.

Starting from Vue 3.0, you can use the Composition API to divide the common data logic into small and isolated composables, using them to create a scoped data control in different components and return the created data if there is any. A composable is a regular JavaScript function that uses Composition API methods and performs data state management internally.

To get started, we create a new JavaScript (.js) file, which exports a function acting as the composable. In the following example, we create a useMessages composable, which returns a list of messages and some methods to modify...

Summary

Throughout this chapter, we learned about composing components using the Composition API and the setup() lifecycle hooks (or <script setup>) as an alternative to the Options API. We also learned how to use different Composition functions to create watchers and lifecycle callbacks to control our components’ local states.

Finally, we learned how to create our custom composable function based on the Composition API and other composables, making our components more organized and readable in groups of similar logic.

In the next chapter, we will explore how we can create global components using plugins and mixins and compose dynamic components.