Introduction to Vue's Composition API for a Newbie

I'm a newbie to Vue.js, and as I was learning about its amazing features, I thought I should share all of this on my blog. Vue.js is a great and impressive framework. Initially, I found it easier to learn than React.js because it has a predefined structure that is more convenient and does not rely on external libraries as much as React.js does.

Vue.js has an ecosystem that handles everything. I hope this will help you understand the Composition API much better.

What is the Composition API?

Imagine you’re building a Lego set. With the old way of using Vue (called the Options API), you’d have all your Lego pieces sorted into specific boxes: one for blue pieces, one for red, one for wheels, and so on. This worked fine for small sets, but when your project got bigger, it became a pain to find the right pieces.

The Composition API In VueJs is like having a big, flexible workbench where you can group related pieces together, making it easier to build complex structures. Instead of sorting your pieces into predefined boxes, you organize them however makes the most sense for what you’re building.

Why Use the Composition API?

Here’s why the Composition API rocks:

1. Better Logic Reuse:
   • In the old way, reusing logic meant dealing with mixins, which could get messy. The Composition API in Vue lets you create small, reusable functions called composables that keep your code clean and modular.
2. Flexible Code Organization:
   • With the Composition API, you group related logic together. If you’re tracking the state of a folder in a file explorer, all the related code (like opening, closing, and renaming folders) is in one place.
3. TypeScript Friendly:
   • If you’re using TypeScript, the Composition API is your best friend. It makes it easier to write type-safe code, which means fewer bugs and more robust applications.
4. Smaller Bundle Size:
   • Your final app can be smaller and faster because the Composition API allows for better optimization and minification of your code.

How to Use the Composition API

Let’s build a simple example. We’ll create a counter component using the Composition API.

1. Set Up Your Project: First, make sure you have Vue 3 set up. If you haven’t done this yet, you can create a new Vue project by running
2. npm init vue@latest
3. Create Your Component: Here’s a basic counter component using the Composition API.vue

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

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

// reactive state
const count = ref(0);

// function to update the state
function increment() {
  count.value++;
}

// lifecycle hook
onMounted(() => {
  console.log(`The initial count is ${count.value}.`);
});
</script>

1. Let's break this down:
   • Reactive State: We use ref() to create a reactive variable called count. Reactive means that Vue will automatically update the DOM whenever count changes.
   • Function to Update State: The increment function() increases the count. Notice how we access the value of count using count.value.
   • Lifecycle Hook: The onMounted function runs when the component is added to the DOM. Here, we log the initial count.

Comparison with React Hooks

If you've dabbled with React, you might be familiar with React Hooks. The Composition API offers similar capabilities but with some key differences:

• One-time Invocation:
  • In Vue’s Composition API, setup functions run once, making the code easier to understand and debug.
• Automatic Dependency Tracking:
  • Vue automatically tracks dependencies for reactive properties and computed values, so you don’t have to manually declare them.
• Less Manual Optimization:
  • Vue’s reactivity system is fine-grained, meaning it knows exactly which parts of your UI need to update when the state changes, reducing the need for manual optimizations.

Real-World Benefits

Imagine you’re working on a large project, like a file explorer for a cloud storage service. You need to handle a bunch of stuff: tracking the current folder, opening/closing folders, creating new folders, etc.

With the Options API, your code for each task gets scattered across different parts of your component, making it hard to follow. Here’s a color-coded example of a component before and after refactoring with the Composition API:

• Before (Options API):
  • Your code is split into different sections (data, methods, computed properties), making it hard to see all the related pieces in one place.
• After (Composition API):
  • Your code is neatly grouped by functionality. Everything related to folder navigation is together, making it easier to read and maintain.

Getting Started

To start using the Composition API in your projects, you can set the site-wide API preference to Composition API using the toggle at the top of the left sidebar in the Vue documentation. Then, go through the guide from the beginning.

You May Like: Optimizing Vue Performance with Prop Stability

Conclusion

The Composition API is a game-changer for writing clean, maintainable, and scalable Vue components. It might take a bit of time to get used to if you’re familiar with the Options API, but the benefits are well worth the effort.

Got questions or need more examples? Drop them in the comments below, and let's learn together! Happy Coding!