Creating Adminlte vue components part 0. Introduction.

Sergi Tur Badenas
2 min readJun 8, 2017

--

Image taken from project: https://github.com/devjin0617/vue2-admin-lte

I think AdminLTE is the most famous free Bootstrap Admin Template I know (but feel free to let me know if you know any other interesting ones). At least not too much projects overcome 1500 starts at Github! It’s such a good think that people like Abdullah Almsaeed contribute opening such amazing projects! Thanks folks!

At most of my projects I want to focus in developing/testing/learning a new idea or concept and I hate to lose time writing boilerplate CSS/UI/presentation code. But I want also to have a good looking UI even in the most simple of my apps so templates like AdminLTE allows me to achieve my goals in less time.

One day I decided to write https://github.com/acacha/adminlte-laravel A laravel 5 package that creates a Laravel app in less than a minute with all the scaffolding code I need to focus on what I really want to spent my time.

But in the last projects I’ve been working I often found myself copy/pasting HTML code from AdminLTE preview to create UI components like boxes, alerts, callouts, dialogs, etc. And so many times this components are not static, they have behaviour (Javascript code related with this components) so most of the times I finally created Vue.js single file components.

The are projects like:

That use Vue.js and AdminLTE together but I finally decided to create my own project to improve my Vue.js experience as a developer. I also decided to create vue.js adminlte components as soon as I need them. You can see my work at:

In future articles I’ll write about how I converted components from Adminlte to Vue.js so be prepared to learn how to create Vue.js components like boxes, alerts and dialogs…

See you soon…

--

--

Sergi Tur Badenas

Computer Science Teacher and Open Source contributor in my free time. Creator of adminlte-laravel. https://acacha.github.io