Vue.js Composition API

What is the Vue.js Composition API and how does it differ from the Options API? I'll explain it here!

August 25th, 2024

Nico Meyer
Nico Meyer
Fullstack JavaScript Entwickler

What is the Composition API?

The Composition API was introduced with Vue 3 to provide developers with more flexibility and better logical structuring of code. Instead of dividing code by options (such as data, methods, computed, etc.), the Composition API allows for organizing logical units independently of these options.

When Should the Composition API Be Used?

  • Reusability: When you need to extract and reuse logic across different components.
  • Complex Components: When a component has many functions and reactive data, the Composition API can help organize the code better.
  • TypeScript: The Composition API integrates well with TypeScript, offering better type safety.

Advantages Over the Options API

  • Better Logic Organization: Related logic can be grouped together, making the code more modular and easier to maintain.
  • More Flexibility: The API is more flexible and allows defining functions outside of Vue components.
  • TypeScript Support: Improved support and integration with TypeScript.

Comparison with the Options API

Structure and Syntax

The Options API organizes code by options (e.g., data, methods, computed). This is easy to understand but can become cumbersome with complex components.

The Composition API, on the other hand, groups related logic in setup functions and can also be moved to external functions.

Example with the Options API

<script>
export default {
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    increment() {
      this.counter++;
    }
  },
  computed: {
    doubleCounter() {
      return this.counter * 2;
    }
  }
};
</script>

Example with the Composition API

<script lang="ts" setup>
import { ref, computed } from 'vue';

const counter = ref(0);

function increment() {
  counter.value++;
}

const doubleCounter = computed(() => counter.value * 2);
</script>

Differences in Approach

In the Options API, methods, data, and computed properties are separated by their function. In the Composition API, however, logic is consolidated, leading to better clarity and modularity, especially in larger components.

Practical Examples

Example with the Options API

<script>
export default {
  data() {
    return {
      message: "Hello, world!",
      count: 0
    };
  },
  methods: {
    incrementCount() {
      this.count++;
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
};
</script>

Example with the Composition API

<script lang="ts" setup>
import { ref, computed } from 'vue';

const message = ref("Hello, world!");
const count = ref(0);

function incrementCount() {
  count.value++;
}

const reversedMessage = computed(() => message.value.split('').reverse().join(''));
</script>

Comparison of Examples

In the Options API example, data, methods, and computed are clearly separated. In the Composition API example, the logic for the counter and the message is within the setup block, providing better clarity and easier reuse of logic.

When to Use Which API?

Composition API

  • Beneficial for Complex Projects: When managing many logical units.
  • Reusable Functions: For reusable functions and better modularity of the codebase.
  • TypeScript: For developers who heavily use TypeScript, the Composition API offers enhanced type support.

Options API

  • Simpler Projects: For simpler projects or smaller components, the Options API is still a solid choice.
  • Existing Projects : In existing projects that are fully based on the Options API, it may be more sensible to stick with it.