Vue Component Fundamentals with the Composition API

Vue.js, a progressive JavaScript framework, empowers developers to build user interfaces with ease. At the heart of Vue's capabilities are components - reusable, self-contained pieces of UI. With the Composition API introduced in Vue 3, components can be more readable and maintainable, especially as applications grow in complexity. This blog post explores the fundamentals of Vue components using the Composition API, focusing on creating single-file components, defining props, and handling events.

?TIP - If you prefer learning via video checkout our in depth course on this very topic: Vue Components Fundamentals with the Composition API.

What is a Component?

In Vue, a component is a custom element that encapsulates reusable code. It can be as simple as a button or as complex as an entire form. Components are the building blocks of Vue applications, allowing developers to break the UI into manageable, reusable parts.

Creating a Single File Component

Vue components can be defined in single-file components (SFCs) with a .vue extension. An SFC consists of three parts: template, script, and style. Here's a basic example of an SFC:

<!-- MyComponent.vue -->
<script setup>
import { ref } from 'vue';

const name = ref('Vue 3');
</script>

<template>
  <div>Hello, {{ name }}!</div>
</template>

<style scoped>
div {
  color: blue;
}
</style>

In this example the <script setup> tag indicates that we're using the Composition API with the setup function, the <template> defines the component's HTML structure, and <style scoped> defines component-specific CSS.

Defining Props

Props are custom attributes you can register on a component. When a value is passed to a prop, it’s available for use within the component. Defining props in a component using the Composition API is straightforward:

<!-- MyComponent.vue -->
<script setup>
defineProps({
  name: String
})
</script>

<template>
  <div>Hello, {{ name }}!</div>
</template>

In this example, defineProps is used to declare that our component expects a name prop of type String.

Passing a value to the prop is done like so.

<!-- TheParent.vue-->
<script setup>
import MyComponent from "./MyComponent.vue"
</script> 
<template>
 <MyComponent name="Vue 3">
</template>

Handling Events

Event handling allows components to communicate and pass data to their parents. In Vue, this is achieved using the emit function. Here's how you can define and emit an event in a component using the Composition API:

<!-- MyComponent -->
<script setup>
const emit = defineEmits(['update']);

function handleClick() {
  emit('update', 'Updated message');
}
</script>

<template>
  <button @click="handleClick">Click me</button>
</template>

In this example, defineEmits is used to specify that our component can emit an update event. The handleClick method emits the update event with a new message when the button is clicked.

In the parent you could listen for the event like so:

<!-- TheParent.vue -->
<script setup>
function doSomething(){
  console.log("do something in response to the update event");
}
</script> 
<template>
    <MyComponent @update="doSomething">
</template>

Conclusion

Vue's Composition API offers a powerful and flexible way to create and manage components. By understanding how to define single-file components, props, and events, you can start building more maintainable and reusable Vue applications. Remember, the key to mastering Vue is practice, so don't hesitate to experiment with these concepts in your projects and if you’d like to dive deeper into how to create Vue components, checkout our course Vue Components Fundamentals with the Composition API.