Getting Started with Vue 3 Composition API

Learn the fundamentals of Vue 3's Composition API and how it revolutionizes component logic organization. Discover modern patterns and best practices that will transform your Vue development experience.

By @johndoe•2/13/2026

The Vue 3 Composition API represents a paradigm shift in how we organize and reuse component logic. Unlike the Options API, which groups code by type (data, methods, computed), the Composition API allows us to organize code by feature, making it easier to extract and reuse logic across components.

Hello World Example

Let's start with a simple hello world example. In Vue 3 Composition API, you can create a reactive message using the ref function. This allows you to track changes and automatically update the UI when the value changes.

Why Composition API?

The Composition API was designed to solve several limitations of the Options API:

  • Better TypeScript support: Improved type inference and better IntelliSense
  • Tree-shaking friendly: Unused code can be eliminated during bundling
  • Better logic reuse: Extract and compose logic more easily
  • Reduced bundle size: More efficient code splitting

Basic Setup

To use the Composition API, you need to import the necessary functions from Vue. The script setup syntax makes it even easier to write components with less boilerplate code.

You can use ref() to create reactive values, computed() for derived state, and various lifecycle hooks like onMounted() for side effects.

Simple Counter Example

Here's a practical counter example that demonstrates reactive state management. You can create a count variable, increment and decrement functions, and a reset function all using the Composition API.

Reactive References

The ref() function creates a reactive reference that can hold any value. When you change the value, Vue automatically updates any components that depend on it. This is the foundation of Vue's reactivity system.

Reactive Objects

For objects, you can use reactive() to make the entire object reactive. This is useful when you have complex state that needs to be tracked as a whole.

Computed Properties

Computed properties automatically track dependencies and update when they change. They're perfect for derived state that depends on other reactive values.

Watchers

Watchers allow you to perform side effects when reactive data changes. You can watch specific values or use watchEffect to automatically track all dependencies.

Lifecycle Hooks

The Composition API provides lifecycle hooks that correspond to the Options API. These include onMounted, onUnmounted, onUpdated, and more.

Composables

One of the biggest advantages of the Composition API is the ability to extract and reuse logic. You can create custom composables that encapsulate common functionality and share it between components.

Best Practices

When using the Composition API, follow these best practices:

  • Extract logic into composables: Make your code reusable and testable
  • Use descriptive names: Make your code self-documenting
  • Group related logic together: Keep related functionality in the same area
  • Return only what's needed: Don't expose unnecessary internal state

Conclusion

The Vue 3 Composition API provides a powerful and flexible way to organize component logic. By understanding the fundamentals of refs, reactive objects, computed properties, watchers, and lifecycle hooks, you can create more maintainable and reusable Vue applications.

Start experimenting with the Composition API in your next Vue project, and you'll quickly see how it can improve your development experience!