Getting Started with Vue 3 Composition API

Vue 3's Composition API offers a more flexible way to organize your component logic, making it easier to reuse code across components and improve readability for complex components.

What is the Composition API?

The Composition API is an alternative syntax to the Options API that Vue has traditionally used. Instead of organizing code by options like data, methods, and computed, you organize it by logical concerns.

Basic Setup

Here's a simple example of a counter component using the Composition API:

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

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

Why Use the Composition API?

• Better TypeScript support: The Composition API was designed with TypeScript in mind.
• Code reusability: Extract and reuse logic across components more easily.
• Improved organization: Group related code together by feature rather than by option type.
• More readable components: Large components become more maintainable.

Creating Composables

One of the most powerful features is the ability to extract logic into reusable functions called "composables":

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

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

Then in your component:

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

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

Conclusion

The Composition API offers a powerful alternative to the traditional Options API. While it has a slightly steeper learning curve, the benefits in code organization, reusability, and maintainability make it worth considering for your Vue projects, especially larger ones.

In future articles, we'll dive deeper into specific composables and patterns to help you make the most of Vue 3's Composition API.