Understanding the Vue 3 Composition API

The Vue 3 Composition API introduces a powerful new way to structure and organize code, giving developers more flexibility and control. While the Options API remains a staple for many, the Composition API offers a modern approach that excels in scalability and reusability.

In this guide, we’ll break down the key concepts of the Composition API and show you how to use it effectively in your Vue 3 applications :)

Enjoy!

🤔 What is the Composition API and why you should try it?

The Composition API is a feature introduced in Vue 3 that enables developers to organize code by logical concerns rather than by component options like data, methods, and computed. It leverages functions and reactive primitives to encapsulate and reuse logic.

Using Composition API provides following advantages:

1. Better Code Organization: Logic is grouped by functionality, not by options.
2. Reusability: Easily extract and reuse logic across components using composables.
3. Scalability: Simplifies managing large components by reducing clutter.
4. TypeScript-Friendly: Works seamlessly with TypeScript, improving type safety.

The Composition API is ideal for large-scale projects, components with complex logic, or/and teams that want improved code reusability and readability.

🟢 Key concepts of the Composition API

The Composition API comes with few key concepts that you should be aware of to utilize its full potential.

1. Reactive State Management

ref creates a reactive reference for a single value. Access or modify the value using .value.

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

Learn the difference between ref and reactive here.

2. Computed Properties

computed is used to create reactive, derived data based on other reactive values.

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);

const double = computed(() => count.value * 2);
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ double }}</p>
  </div>
</template>

3. Watchers

watch observes reactive values and performs actions when they change.

<script setup>
import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

4. Lifecycle Hooks

The Composition API offers equivalent lifecycle hooks as functions.

<script setup>
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  console.log('Component mounted');
});

onUnmounted(() => {
  console.log('Component unmounted');
});
</script>

5. Composables

A composable is a reusable function that encapsulates logic. It’s a cornerstone of the Composition API’s reusability.

Example: Composable for Counter Logic

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  return { count, increment, decrement };
}

Using the Composable:

<script setup>
import { useCounter } from './useCounter';

const { count, increment, decrement } = useCounter();
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

Learn more about good practices and design patterns for Vue composables here

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

The Vue 3 Composition API provides a modern, flexible way to handle state and logic, making your applications easier to scale and maintain. By understanding and using reactive primitives, computed properties, watchers, and composables, you can write cleaner and more reusable code.

Start experimenting with the Composition API today to unlock its full potential!

Take care and see you next time!

And happy coding as always 🖥️

Comments

[Bruno]

Great article Jakub! 👏 I agree with every point you mentioned.

It is so much better to build Vue solutions with the Composition API than with the old Options API! I didn’t like the way the script syntax was previously designed, because it felt like I was working with objects rather than actually JS logic. 😅 But now with the Composition API, everything is much easier, and cleaner, beside the fact that it is also easier to work with the template, too, since you know exactly where the logic and the properties are, rather than looking through nested objects. 🧽

[Jakub Andrzejewski]

Thanks Buddy, I like this syntax a lot too! :)

Happy coding!