Jump to content

Creating your first component using Vue 3 Composition API.

  • Run the command npm create vite@latest in your directory for projects.

  • Follow the prompts, type your project name and select Vue and Typescript.

  • cd

  • npm install

  • npm install sass (this is so we can use the SCSS preprocessor)

  • npm run dev

And we’re ready to go!

First thing we’ll need to do is create a new Vue file, so within src/components let’s create a file named ToDoListItem.vue and populate it with our basic SFC (single file component) sections:

ToDoListItem.vue basic code scaffold
I am using Typescript and SCSS in this project

Don’t forget to import it in your App.vue so you can view your changes! Using the script setup syntax, all we need to do is import the component and it is readily available to use in our template.

Importing and using ToDoListItem component on App.vue

Our component is going to require icons, for this project I’m going to create some components for each icon and paste the SVG markup within a component, these will be defined in src/components/icons.

DeleteIcon.vue component

After we’ve set up our icons, we need to build a basic checkbox, label for a name and a delete button at the end.

Basic styling and markup for ToDoListItem describing a checkbox, label and delete icon.

With the aesthetics covered, let’s get to the Javascript! In this component we need to be able to keep track of the checked boolean state of the input, and we will also need to emit a custom event whenever the item has been checked/unchecked.

We will be using ref from Vue’s reactivity API, with this we can set a default value (false) and update it whenever we check or uncheck the checkbox. We will also need a function to handle the change event that we will hook into, on the input element.

ToDoListItem.vue updated script section with ref api and event handler.

This will expose our isChecked and handleChange variables so we can use them straight away in our template section.

The ref API will allow us to store and update a primitive value, in this case we’re handling a boolean. To update this variable, all we have to do is access value and re-assign, e.g. isChecked.value = true.

Updating markup for ToDoListItem.vue to hook into input event and bind classes to elements.

Here you can see we have bound two classes using the isChecked boolean, one on .item__checkbox and one on .item__name. We also access the change event on the input and assign handleChange as its event handler.

Summarised: any time the input changes, it will fire handleChange which stores if it’s checked or not, then binds the classes if isChecked equals true.

Example of the checkbox aesthetically working
Our component in action!

Now that our component can be interacted with, we need to emit our custom event with isChecked as the payload. We will use defineEmits to decide what events can be emitted from this component – we will use the Typescript syntax for this as shown below:

Defining emits in ToDoListItem.vue

The interface passed to defineEmits lets us define a function that can receive parameters: e which is the name of the event we’re defining as a string; and the payload which we name and provide a type for. Don’t forget to call emit in handleChange with the name of the event and its payload.

To add another event, you can simply do the same on the line below, e.g.

Example of adding another event to defineEmits

So how do we use this event we have defined? Go to App.vue and update the file to handle the event, like we did with the native event in ToDoListItem.vue:

Updating App.vue to access ToDoListItems custom event

And if you test in the browser, you should get this:

Example of finished component console logging it's state

That’s it! A simple component that handles state and emits its own events. The next post will be about creating the entire to-do list, using this component.

Want to start your next Vue.js project?

Looking to start your next Vue.js project? We’re passionate about creating top-quality web applications that stand out from the crowd. Let our skilled development team work with you to bring your ideas to life! Get in touch today and let’s get started!


Laravel Partner

Since 2014, we’ve built, managed and upgraded Laravel applications of all types and scales with clients from across the globe. We are one of Europe’s leading Laravel development agencies and proud to support the framework as an official Laravel Partner.

Get in touch

Vue Experts

We use Vue alongside Laravel on many of our projects. We have grown our team of experts and invested heavily in our knowledge of Vue over the last five years.

Get in touch