Table of contents
daisyUI Badge Component for Vue.js
Badges are useful for letting your website users know the status of data. For example you might want to let advertisers know if their advert is live, expired, pending approval etc. In this post we will look at how to create a daisyUI Badge component for Vue.js.
The daisyUI docs are very good. They give a solid starting point for a badge component. Unfortunately, at this point in time they don’t have a badge component that we can copy and paste straight into a Vue.js project. Luckily we can do this ourselves! This guide is suitable for any Vue.js project, whether this is a standard Vue.js project, Laravel + Inertia.js + Vue.js, Nuxt or any other form of Vue.
Before you create your daisyUI badge component
Before we create our badge component we need to make sure our project is set up to use daisyUI. We must have both TailwindCSS and daisyUI installed. Instructions on installing TailwindCSS 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 badge component.
Create daisyUI Badge component in Vue
We can now create our badge component. In your components folder, create a new file named BadgePrimary.vue. I recommend creating a separate component for each button type you wish to use. It is possible to have just one Button component and load classes conditionally but from experience, just trust me. It is not worth doing this. Paste the code below into your newly created BadgePrimary.vue file.
// BadgePrimary.vue<template> <div class="badge badge-primary badge-outline"> <slot ></slot> </div></template>Different daisyUI badge styles
There are LOTS of different badge components to choose from in the daisyUI docs. There are badges with brand colours, badges with outlines, badges in buttons the list goes on. Create a component for each of the badge styles you want to have. And name them appropriately so it is obvious what they look like from the name.
The concept of converting any of the badges in the daisyUI docs itto a re-useable Vue.js component is the same. The example above is for a badge with the primary brand colour and an outline.
BadgePrimary.vue code explained
The BadgePrimary.vue component is very simple. It has one slot. This slot allows you to add any text you like to the badge.
The same result can be achieved by passing a prop. However in this case I think it makes sense to use a slot.
Use the daisyUI Badge component in your parent component
Now we have created our badge component, we can use it in other components. This is easy to do. See the example below:
// Parent component// index.vue<template> <div> <BadgePrimary> Some status </BadgePrimary> </div></template>I am using Nuxt in this example. I therefore do not need to import the BadgePrimary.vue component. If you are not using Nuxt, you will almost certainly need to import the BadgePrimary.vue component into your parent component.
Parent component code explained
The above code in the parent component outputs the BadgePrimary.vue component. The content between the BadgePrimary tags is outputted in the slot in the badge component. As mentioned previously the same result can be achieved using props.
Premium templates for daisyUI
You can now purchase pre-made templates from daisyUI! Feel free to check them out for yourself
Why should we make our Badge components re-useable in Vue?
By making our Badge components re-useable we save a lot of time. This is because we only have one version of the specific component to maintain. We can reuse the component as many times as we want. And just pass in the data we want to display each time! This means that if we want to change the styling of our Badge component, we only need to do this once! This is great, because say we wanted to increase the padding slightly, we only need to do this in one place rather than trawling through hundreds of components!
I have videos too!
If you found this post helpful, please consider subscribing to the @codingoblin YouTube channel 😀
