Create Vue 3 Apps with the Composition API
Tags: codenewbie, beginners, webdev, javascript
Published: 2021-01-17 23:10:16

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

Vue 3 comes with the Composition API built-in.

It lets us extract logic easily an not have to worry about the value of `this` in our code.

It also works better with TypeScript because the value of `this` no longer has to be typed.

In this article, we’ll look at how to create Vue 3 apps with the Composition API.

### Basic Example

We can create a basic app by defining reactive properties and using them in templates.

For instance, we can write:

```
<template>
  <div>
    <button @click="increment">increment</button>
    {{ count }}
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment,
    };
  },
};
</script>
```

We define the `count` reactive property with the `ref` function.

0 is its initial value.

And we add the `increment` function to update its value.

It’s updated differently than in the options API. We’ve to update the `value` property to update a reactive property with primitive values.

Then we return both `count` and `increment` so we can use them our template.

`setup` is a method that runs when we mount the component.

We can define object valued reactive properties with the `reactive` function.

To do this, we write:

```
<template>
  <div>
    <button @click="increment">increment</button>
    {{ state.count }}
  </div>
</template>

<script>
import { reactive } from "vue";

export default {
  setup() {
    const state = reactive({
      count: 0,
    });
    function increment() {
      state.count++;
    }

    return {
      state,
      increment,
    };
  },
};
</script>
```

We call `reactive` with an initial object value.

Then we assign it to the `state` reactive property.

In the `increment` function, we update the `state.count` property to update its value.

And we return `state` and `count` so we can use them in the template.

### Computed Property

To create a computed property, we can use the `computed` function.

To do this, we write:

```
<template>
  <div>
    <button @click="increment">increment</button>
    {{ state.count }}
    {{ double }}
  </div>
</template>

<script>
import { reactive, computed } from "vue";

export default {
  setup() {
    const state = reactive({
      count: 0,
    });
    const double = computed(() => state.count * 2);

    function increment() {
      state.count++;
    }

    return {
      state,
      double,
      increment,
    };
  },
};
</script>
```

We pass a callback into the `computed` method to return the value we want for the computed property.

`computed` can be called in the object that we pass into `reactive` to add the computed property as a property of another reactive property.

### Watchers

We can add a watcher into our Vue app with the `watch` function.

For instance, we can write:

```
<template>
  <div>
    <button @click="increment">increment</button>
    {{ state.count }}
  </div>
</template>

<script>
import { reactive, watch } from "vue";

export default {
  setup() {
    const state = reactive({
      count: 0,
    });
    function increment() {
      state.count++;
    }
    watch(
      () => state.count,
      (count) => {
        console.log(count);
      },
      { immediate: true }
    );
    return {
      state,
      increment,
    };
  },
};
</script>
```

to add it.

The first argument of `watch` is a function that returns the `state.count` reactive property.

In the 2nd argument, we get the latest value of `state.count` with `count` and log it.

The 3rd argument is an object with options for the watcher.

We can set `deep` and `immediate` in there as we do with the options API.

`deep` means watch all nested properties of an object for changes.

`immediate` means the watcher runs immediately when the component is mounted.

### Conclusion

We can use the Vue 3 Composition API to define our components.

All the things we have in the options API are still available with some improvements.