daisyUI Button Component for Vue.js

daisyUI Button Component for Vue.js

Let's to create a daisyUI Button Component in Vue.js. Buttons are useful for a number of reasons. They allow us to draw attention to certain links and are an indication to our web users that an action can be taken.

The daisyUI docs provide a great starting point for button components. However at the moment they don't have a button 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 button component

Before we create our button 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 button component.

Create daisyUI Button component in Vuejs

We can now create our button component. In your components folder, create a new file named SuccessButton.vue. Paste the code below into your newly created SuccessButton.vue file.

<template>
    <button class="btn btn-success">
        <slot></slot>
    </button>
</template>

Different daisyUI button styles

There are many different button components to choose from in the daisyUI docs. Button's of different sizes, colours and outlines.

In our example we are creating a success button. I suggest you create a separate button component for each button type that you need.

Button.vue code explained

The Button.vue component above takes has one slot. This slot will allow us to use the component in a parent component, putting our button text between SuccessButton tags.

Use the daisyUI Button component in your parent component

Now we have created our button component, we can use it in other components. This is simple to do. See the example below:

// Parent component
<template>

    <div>
        <SuccessButton>
            Button text
        </SuccessButton>
    </div>

</template>

I am using Nuxt in this example. I therefore do not need to import the Button.vue component. If you are not using Nuxt, you will almost certainly need to import the Button.vue component into your parent component.

Parent component code explained

The above code in the parent component outputs the Button.vue component. We put our button text between the SuccessButton tags.

It is possible to achieve the same result using a prop. I personally think slots make more sense in this situation but it is up to you how you do it.

Why should we make our Button components re-useable in Vue?

By making our Button components re-useable we save ourselves time in the future and make our lives easier. Whenever we need a button we can simply reuse one we created. This means we don't need to keep writing more code. And more importantly, if we want to change anything, such as the border colour or size of the button, we only need to do it in the component and not throughout the whole app!