The Composition API is a 100% optional new feature, introduced by Vue 3. You can use the Composition API instead of the existing Options API to write Vue components.
In the above video, I provide a thorough introduction to the Composition API.
You can also dive into my Vue - The Complete Guide Course to learn all about Vue, including the Composition API (in greater detail) from the ground up!
Here’s how code looks like when using the Options API:
<template>
<h2>{{ message }}</h2>
<button @click="changeMessage">Change Message</button>
</template>
<script>
export default {
data() {
return {
message: 'This works just fine!'
};
},
methods: {
changeMessage() {
this.message = 'The Composition API is just an alternative!';
}
}
}
</script>When switching to the Composition API, this code would look like this:
<template>
<h2>{{ message }}</h2>
<button @click="changeMessage">Change Message</button>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('This works just fine!');
function changeMessage() {
message.value = 'The Composition API is just an alternative!';
}
return {
message,
changeMessage
};
}
}
</script>Watch the video at the beginning of this page to get a thorough introduction to the Composition API and understand what’s happening here.
