Vue 3 introduced the Composition API — a modern, function-based approach to building components. If you’ve been using the Options API (data, methods, computed, etc.), this might feel like a big shift. But the Composition API gives you more flexibility, reusability, and scalability.

In this post, we’ll explore what it is, how it works, why it matters, and we’ll finish with a real-world API fetching example.

🧩 What is the Composition API?

The Composition API is a collection of functions (like ref, reactive, watch, computed) that you use inside a setup() function (or <script setup>). Instead of organizing code into option blocks, you compose logic directly.

👉 In short:
It lets you group related logic together in one place, making your components more readable and reusable.

🔑 Core Features

Here are the most important building blocks:

• ref() → create reactive primitive values (like numbers, strings, booleans).
• reactive() → create reactive objects or arrays.
• computed() → define derived values based on reactive state.
• watch() → run side effects when values change.
• Lifecycle hooks (onMounted, onUnmounted, etc.) → usable inside setup().
• Composables → reusable functions built with Composition API logic.

⚖️ Options API vs Composition API

Options API (Vue 2 style)

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

Composition API (Vue 3 style)

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

const count = ref(0)
const increment = () => count.value++
</script>

<template>
  <p>{{ count }}</p>
  <button @click="increment">+</button>
</template>

✨ Notice the difference:

• With Options API, logic is split across data and methods.
• With Composition API, everything (state + methods) is grouped together.

🚀 Why Use Composition API?

1. Better logic organization → Group related logic in one place.
2. Reusability → Extract shared code into composables (useAuth, useFetch, etc.).
3. TypeScript-friendly → Works smoothly with static typing.
4. Scalable → Easier to manage large and complex components.

🌍 Real-World Example: Fetching API Data

Let’s say we want to fetch user data from an API.

Step 1: Create a composable useFetch.js

// composables/useFetch.js
import { ref, onMounted } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  onMounted(async () => {
    try {
      const res = await fetch(url)
      data.value = await res.json()
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  })

  return { data, error, loading }
}

Step 2: Use it inside a component

<script setup>
import { useFetch } from '@/composables/useFetch'

const { data, error, loading } = useFetch('https://jsonplaceholder.typicode.com/users')
</script>

<template>
  <div>
    <p v-if="loading">Loading...</p>
    <p v-if="error">Error: {{ error.message }}</p>
    <ul v-if="data">
      <li v-for="user in data" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

✨ What happened?

• The composable useFetch handles logic for fetching.
• The component only takes care of rendering.
• Now, you can reuse useFetch anywhere in your app.

🎯 Final Thoughts

The Composition API makes Vue components cleaner, reusable, and scalable. It might look different at first, but once you start grouping related logic together, you’ll see how powerful it is compared to the Options API.

If you’re building modern Vue 3 apps, learning the Composition API is a must.

🔄 Vue.js: Composition API vs Mixins vs Composables

When working with Vue, developers often ask:

• What’s the difference between the Composition API and Composables?
• Do Mixins still matter in Vue 3?
• When should I use one over the other?

Let’s break it down with clear explanations and examples.

🧩 Mixins (Vue 2 era)

🔑 What are Mixins?

Mixins are objects that contain reusable logic (data, methods, lifecycle hooks) which can be merged into components.

⚡ Example: Counter with a mixin

// mixins/counterMixin.js
export const counterMixin = {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

<script>
import { counterMixin } from '@/mixins/counterMixin'

export default {
  mixins: [counterMixin]
}
</script>

<template>
  <p>{{ count }}</p>
  <button @click="increment">+</button>
</template>

✅ Pros

• Easy to reuse logic.
• Simple syntax.

❌ Cons

• Name conflicts → two mixins or component methods can override each other.
• Hard to track where logic comes from in large apps.
• Doesn’t scale well.

👉 That’s why Vue 3 encourages Composition API + Composables instead.

⚙️ Composition API

🔑 What is it?

The Composition API is a set of functions (ref, reactive, watch, computed, lifecycle hooks) that let you write components in a function-based style.

⚡ Example: Counter with Composition API

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

const count = ref(0)
const increment = () => count.value++
</script>

<template>
  <p>{{ count }}</p>
  <button @click="increment">+</button>
</template>

👉 Unlike Mixins, all logic lives inside the component — no magic merging.

✅ Pros

• Explicit and predictable.
• Works great with TypeScript.
• Organizes related logic together instead of scattering across options.

🔄 Composables

🔑 What are Composables?

Composables are just functions that use the Composition API to encapsulate and reuse logic.

They’re often named with a use prefix (useAuth, useCounter, useFetch).

⚡ Example: Reusable counter composable

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

export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}

Usage in a component:

<script setup>
import { useCounter } from '@/composables/useCounter'

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

<template>
  <p>{{ count }}</p>
  <button @click="increment">+</button>
</template>

✅ Pros

• Clear and explicit (unlike Mixins).
• Reusable across multiple components.
• Easy to test (plain functions).
• Scales beautifully in large apps.

🆚 Side-by-Side Comparison

🎯 Final Thoughts

• Mixins were useful in Vue 2, but they can cause naming conflicts and make code hard to trace.
• Composition API solves these issues by letting you organize logic in setup() with functions like ref, reactive, watch.
• Composables build on the Composition API — they’re just functions that encapsulate and reuse logic across components.

👉 In Vue 3, the recommended pattern is:

• Use Composition API inside components.
• Extract reusable logic into Composables.
• Avoid Mixins unless maintaining legacy Vue 2 code.

Author: Abhilash

Hi, I’m Abhilash! A seasoned web developer with 15 years of experience specializing in Ruby and Ruby on Rails. Since 2010, I’ve built scalable, robust web applications and worked with frameworks like Angular, Sinatra, Laravel, Node.js, Vue and React. Passionate about clean, maintainable code and continuous learning, I share insights, tutorials, and experiences here. Let’s explore the ever-evolving world of web development together! View all posts by Abhilash