Stats Component for Vue.js [Tailwind CSS]
Building a reusable stats component for Vue JS using Tailwind. I built the Tailwind stats component in Vue.js but the principles are the same for any framework or technology that is capable of using Tailwind!
To get to the same starting point as me, you will need to install a new Vue project. I did this in the standard way, using npm. I then installed Tailwind into my Vue.js project using the instructions for Vite on the Tailwind website. You will then need to create a new component named "Stats" and import it into your App.vue file. Once you have done this you are at the same starting point as I am in this video!
From the starting point I started building my stats component in the Stats.vue file. I did this by first adding the HTML markup for the stats and then passing props from the parent component. I passed a stats prop for the stats component. This stats prop is an array of objects, containing all the information for the stats. I then went about adding in the Tailwind CSS classes to make the stats look nice.
If you can't be bothered to create your own stats component using Tailwind, there are plenty of Tailwind component libraries that have pre built stats you can use. I personally like Tailkit (https://tailkit.com/?aff=D67K2) because it has a huge amount of components and they look amazing.
My Hosting Provider - use code GOBLIN for a discount. Free trial with no card required:
https://platform.cloudways.com/signup...