Creating simple and re-useable components with Vue.js for AdminLTE theme

Creating simple and re-useable components with Vue.js has always given me a fun thing to do. It always force me to code the component in such a way that I am forced to think how the code can be decoupled from the current requirement in hand and make it a very generic one.

Recently, I was working on an application, which was using the AdminLTE theme and this particular theme always encouraged me to make components from the theme. And in this article I will walk you through the process how I made the small box widget of AdminLTE into a re-useable component.

AdminLTE small box widget
AdminLTE small box widget

So, these small boxes are very useful on Dashboard and other pages where we want to show some summary information. And the application, which I was working on in my office, had such requirements. I could have copied the markup and pasted everywhere I wish to show the info. But it was not an approach, which seemed future proof. What if the summary information changes? What if I want some animations to the widgets on page load?

And so, I created the first draft of my component:

 

Small box component code
Small box component code

So, as you can see, I am just taking quite a few properties into the component and in that way, I am now able to create multiple instances of such components. Programatically change their data and not only that, I am also planning of adding attributes so that they are reactive in nature. When ever there is an event broadcasted which pertains to these components, they will react as expected like may be update their data or change colour may be.

And components like these have full potential to be a real time widget isn’t it?

Potential realtime component
Potential realtime component

And yes, because I am using Vue.js inside my Laravel application; sending data to the component was very easy. Here is one instance where I passed data to the components through PHP

Component implemented
Component implemented inside a Laravel blade file with data from PHP

So, you can see with this approach you can create many such beautiful and powerful components and continue to re-use them as and when required.