Table of contents
daisyUI Checkbox Component for Vue.js
In this post we will look at how to create a daisyUI Checkbox Component for Vue.js. Checkboxes are an important part of a UI. They can be used for agreeing to website terms. Selecting options and many other things.
The daisyUI docs provide a great starting point for a checkbox component. However at the moment they have a checkbox component that we can copy and paste directly into Vue.js. Luckily we can easily do this ourselves. This guide is suitable for any Vue.js project, whether this is Nuxt 2, Nuxt 3, Laravel + Inertia.js + Vue.js or anything else using Vue!
Before you create your daisyUI checkbox component
Before we create our checkbox component we need to make sure our project is set up to use daisyUI. We need to have installed TailwindCSS and daisyUI. Instructions on installing Tailwind can be found on the TailwindCSS website. Instructions on how to install daisyUI can be found in the daisyUI docs.
Once you have installed both TailwindCSS and daisyUI in your Vue.js project you are ready to create your daisyUI checkbox component.
Create daisyUI Checkbox component in Vuejs
We can now create our checkbox component. In your components folder, create a new file named Checkbox.vue. Paste the code below into your newly created Checkbox.vue file.
// Checkbox.vue<template> <input v-model="model" type="checkbox" checked="checked" class="checkbox" /></template><script setup>const model = defineModel()</script>Different daisyUI checkbox styles
There are many different checkbox components to choose from in the daisyUI docs. Different shapes and different colours. These can further be customised yourself if you need to. But you probably won’t need to.
It doesn’t matter which style you choose, the concept of converting it to a re-useable Vue.js component is exactly the same. The example above is a checkbox on its own. You can adapt this example to include a label for the checkbox if needed.
Checkbox.vue code explained
The Checkbox.vue component above defines a model. This allows us to use v-model on the this component from within the parent component. This will make sense further down when we use this component in a parent.
Use the daisyUI Checkbox component in your parent component
Now we have created our checkbox component, we can use it in other components. This is simple to do. See the example below:
// Parent component// index.vue<template> <div> <Checkbox v-model="my_checkbox" /> </div></template><script setup>const my_checkbox = ref(false)</script>I am using Nuxt in this example. I therefore do not need to import the Checkbox.vue component. If you are not using Nuxt, you will almost certainly need to import the Checkbox.vue component into your parent component. You will also need to import ref.
Parent component code explained
The above code in the parent component outputs the Checkbox.vue component. We define a my_checkbox ref and give it an initial value of false. This ref is then bound to the Checkbox component using v-model. This allows us to access the value of my_checkbox in our parent component.
daisyUI now has templates!
Wow, daisyUI has pre-made templates you can buy. This is excellent news.
Why should we make our Checkbox component re-useable in Vue?
By making our Checkbox component re-useable we save ourselves time in the future and make our lives easier. Whenever we need a checkbox we can simply reuse the one we created. This means we don’t need to create a new one each time. And more importantly, if we want to change anything, such as the styling, we only need to do it in one place.
I have videos too!
If you found this post helpful, please consider subscribing to the @codingoblin YouTube channel 😀
