Vue Composition Api Example

Posted on  by admin
Vue 3's main new feature is the Composition API, a new way to write and organize your components.

Source Code

Replacing lifecycle hooks

Learn how to use it by refactoring a component using the classic Options API. The Composition API is a great extension to Vue and the classic Options API that you are used to. It is especially useful for making code reusable and enhancing the readability of big components, but can be used for any component.

Even if you haven't yet upgraded to Vue 3, you can use the plugin for Vue 2. In this tutorial, we will extend the classic Vue Hello World-counter-example by displaying the current time to the user and updating it every second.

We will start by using the Options API, to which we are accustomed, then refactor our code to use the Composition API, and finally extract a reusable composition function.

The simplest way to test out Vue 3 is by using the tool Vite.

and visit your local server. You should see the Hello World page with a counter which increases when clicked. The entrypoint for Vue is src/Vue.app, which renders the Vue logo and src/components/HelloWorld.vue. We will extend the HelloWorld.vue-component while keeping the code for the counter.

We start by implementing our clock with the classic Options API. We want to display the current time to the user and will use a javascript Date-object for this. We extend the object returned from the data()-option with a property called currentTime:. To actually display the time, we add a paragraph at the bottom of our template, just above the closing -tag:.

What’s changed when Vue Composition API is added?

After saving the component, the page should reload automatically and now display the current time. The displayed time does not yet get updated - we would need to refresh the page for that.

Instead, we want to automatically update the currentTime property from our data every second. To do so, we add the following code to our script-section, just beneath our data-option:.

Let's look at what we have done here:. The methods-option now contains a method updateCurrentTime, which just sets the currentTime-property from our data to the current time when called.

In the created-option, we set an interval which calls updateCurrentTime every second. We store the returned handle in this.intervalHandle so that we can access it later.

In the beforeUnmount-option (beforeDestroy in Vue 2) we clear the interval using the stored handle.

We can now watch our clock get updated, and are already done with the Options API-implementation! Setting up our auto-updating clock required quite some code, which is also placed all over the component - we needed to use the data, methods, created and beforeUnmount options.

The data-option already contains code for two functionalities, the counter and the clock, and we can easily imagine that other options will also grow to contain code for different purposes.

Updating the current time

The Composition API offers a way to group our code by functionality instead of by option.

What is the Composition API?

To take advantage of this, we first need to move our code from the different options to the new setup-function, which we will do option by option:.

We start by moving the data-option to the setup-function:. Here we create a mutable property, called ref, for everything we previously returned from data.

These references can be tracked by Vue's reactivity system, so that changes are automatically picked up.We make these references, count and currentTime, available to the component by returning them from the setup-function, meaning they can be accessed by using this.count and this.currentTime, just like when we returned them from data.

Inside the setup-function, we access and set the value of a reference by using .value, e.g.

currentTime.value = new Date() or const newDate = currentTime.value.

  1. Outside of setup, e.g. in methods or the