Home / Blog / Vue Component Fundamentals with the Composition API
Vue Component Fundamentals with the Composition API

Vue Component Fundamentals with the Composition API

Daniel Kelly
Daniel Kelly
March 26th 2024

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.

Start learning Vue.js for free

Daniel Kelly
Daniel Kelly
Daniel is the lead instructor at Vue School and enjoys helping other developers reach their full potential. He has 10+ years of developer experience using technologies including Vue.js, Nuxt.js, and Laravel.

Comments

Latest Vue School Articles

Enhance Your Vue.js UI Skills: Free Learning Opportunity

Enhance Your Vue.js UI Skills: Free Learning Opportunity

Explore practical Vue.js UI tools and techniques during Vue School's Free Weekend. Learn how to efficiently use Tailwind CSS, Vuetify, and animations to enhance your applications. Access 1300+ lessons to improve your development skills.
Maria Panagiotidou
Maria Panagiotidou
How to Access Vue Refs Defined in Script Setup within Unit Tests

How to Access Vue Refs Defined in Script Setup within Unit Tests

Need to access a component’s data defined within script setup? In this article we’ll teach you how! But be warned you probably want to approach your test a little differently.
Daniel Kelly
Daniel Kelly

Our goal is to be the number one source of Vue.js knowledge for all skill levels. We offer the knowledge of our industry leaders through awesome video courses for a ridiculously low price.

More than 200.000 users have already joined us. You are welcome too!

Follow us on Social

© All rights reserved. Made with ❤️ by BitterBrains, Inc.