daisyUI Countdown Component for Vue.js

daisyUI Countdown Component for Vue.js

In this article we will look at how to create a daisyUI Countdown Component for Vue.js. Countdowns are great for displaying limited time offers. Or anything time sensitive on our websites.

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

Before you create your daisyUI countdown component

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

Create daisyUI Countdown component in Vuejs

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

Different daisyUI countdown styles

There are many different countdown components to choose from in the daisyUI docs. Some are more complicated than others. The one in our example is a simple one. However if you need days, hours, minutes and seconds to countdown there are options for this too.

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 a countdown of seconds only. The same result can be achieved using any of the countdowns available on the daisyUI website but the logic for the countdown will need to be specific to the one you choose.

Countdown.vue code explained

The Countdown.vue component above accepts one prop:

1. counter

This allows us to pass a number to the Countdown.vue component from a parent component.

Use the daisyUI Countdown component in your parent component

Now we have created our countdown 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 Countdown.vue component. There are a couple of important things going on in the setup script. We define a constant named counter. When the component is mounted we run a function that will minus 1 from the value of counter, each second.

It will only do this if the value of counter is greater than 0. This prevents the counter going into minus figures. We then have a computed value that returns the value of counter. This computed value is passed to out countdown component!

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

By making our Countdown component re-useable we save ourselves time in the future. Whenever we need a countdown we can reuse the one we created. This means we don’t have to use a new version every time we want one. And if we want to change the styling at all we only need to do it in the one component!