daisyUI Alert Component for Vue.js

daisyUI Alert Component for Vue.js

In this post we will look at how to create a daisyUI Alert Component for Vue.js. Alerts can be used to draw attention to important info in our UI. They can be used to warn our users of something, let them know an action was successful, and many other reasons.

The daisyUI docs provide a great starting point for an alert component. However they don’t currently have an alert component that we can copy and paste directly into a Vue.js. We can however, do this ourselves. This guide is suitible for any Vue.js project, whether this is Nuxt, Laravel + Inertia.js + Vue.js or anything else using Vue.

Before you create your daisyUI alert component

Before we create our alert component we need to make sure our project is set up so we can 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 alert component.

Create daisyUI Alert component in Vue

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

Different daisyUI alert styles

There are many different alert components to choose from in the daisyUI docs. Simple alerts that have an icon and some text. And alerts that also have buttons in them to allow your users to take action.

It doesn’t matter which style you choose, the concept of converting it to a re-useable Vue.js component is the same. The example above is an alert with an icon, some text and a link. The same result can be achieved using any of the alerts available on the daisyUI website.

Alert.vue code explained

The Alert.vue component above has three named slots. These slots are:

1. icon
2. content
3. buttons

This allows us to pass an icon, some text, and any buttons to the Alert.vue component from a parent component. The same result can be achieved by passing props. However in this case I think it makes sense to use slots.

Use the daisyUI Alert component in your parent component

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

Parent component code explained

The above code in the parent component outputs the Alert.vue component. The named slots pass the data from the parent component to the Alert.vue component. As mentioned previously – the same result can be achieved using props instead of slots.

Why should we make our Alert component re-useable in Vue?

By making our Alert component re-useable we save a lot of time. This is because we don’t have to maintain multiple versions of components. That only differ by the content. This means that if we want to change the styling of our Alert component, we only need to do this once! Rather than changing it for multiple instances.