The Difference Between Composition, Composition API, and Composables in Vue 3

In Vue 3, the terms Composition, Composition API, and Composables are closely related and often used interchangeably but they refer to different concepts. Understanding the differences is not hard and can make you look smarter.

Composition Pattern

Composition is an architectural pattern. The concept is simple. If you need to reuse some functionality between two components you create a new file (component or composable) that both will import and use.

Retrospectively, this sounds obvious but for years we have convinced ourselves that inheritance was the way.

Inheritance works, until it doesn’t.

Inheritance can lead to overly complicated structures, with too many classes, making the code hard to understand and manage. Sometimes, it forces classes to have features they don’t really need, making the code unnecessarily large and confusing. It is not always obvious who is using a piece of functionality or where it is coming from.

Unfortunately, code reusability in Vue 2 was based on mixins which are behind-the-scenes inheritance. It’s not obvious with Options API but the extends in Class syntax gives it away.

import Component, { mixins } from "vue-class-component";
import { Hello, World } from "./mixins";

@Component
export class HelloWorld extends mixins(Hello, World) {
  created() {
    console.log(this.hello + " " + this.world + "!"); // -> Hello World!
  }
}

[Why Mixins are Considered Harmful](/why-mixins-are-considered-harmful-8d51a2709d2c)

Moving away from mixins and inheritance is the main reason Vue 3 was introduced.

Composition API

The Composition API is a set of utility functions introduced in Vue 3 to enable code reusability with the Composition pattern. It is an umbrella term for 3 different APIs.

Reactivity API, e.g. ref() and reactive(), allows us to directly create the reactive state, computed state, and watchers.
Lifecycle Hooks, e.g. onMounted() and onUnmounted(), allow us to hook into the component lifecycle programmatically.
Dependency Injection, i.e. provide() and inject(), allows us to leverage Vue’s dependency injection system while using Reactivity APIs

Every function that we need has to be imported explicitly which keeps component dependencies more obvious.

Composables

Composables are reusable stateful functions. They really are just functions. They can be used to share reactive state and logic between components.

A very basic example is abstracting the logic of the counter in the following component.

// composables/useCounter.js

import { ref } from "vue";

export default function () {
  const counter = ref(0);

  function increase() {
    counter.value++;
  }

  return {
    counter,
    increase,
  };
}

Notice that the state has to be declared with ref in order to be reactive and that we need to return the public API of the composable.

We can import and use it in the following clean way:

// components/Counter.vue
<script setup>
import useCounter from "./useCounter.js";
const { counter, increase } = useCounter();
</script>

<template>
  <p>Counter: {{ counter }}</p>
  <button @click="increase">Increase</button>
</template>

Codesandbox

Conclusion

In essence, the Composition pattern is the methodology, the Composition API provides the tools to implement this pattern in the Vue world, and Composables are instances of this pattern, encapsulating state, and reusable logic.

The Difference Between Composition, Composition API, and Composables in Vue 3