From Bare Bones to Beautiful: A Vue.js Developer’s Journey
As a self-proclaimed “designer-challenged” web developer, I’ve always struggled to create visually appealing applications. But, with the help of Vue.js and various UI frameworks, I’ve discovered that even I can create stunning web pages. In this article, I’ll take you through my journey of transforming a bare-bones application into a beautiful one using three popular Vue.js UI frameworks: BootstrapVue, Vuetify, and Quasar.
The Bare Application
My initial application consists of a Vue.js application with a router, serving up four pages: a plain text page, a tabular set of data representing a list of cats, a list of pictures, and a simple contact form. The code is straightforward, but the design is, well, lacking.
BootstrapVue: A Familiar Friend
The first framework I explored was BootstrapVue, a popular choice among Vue.js developers. I’ve used Bootstrap before, so I was excited to see how it would integrate with Vue.js. The installation process was smooth, and I quickly got to work updating my components. One of the things I loved about BootstrapVue was how easy it was to use its components, such as the navbar and jumbotron. My application was starting to look good!
Vuetify: Material Design Made Easy
Next up was Vuetify, a material design-inspired UI framework. I was impressed by how easy it was to install and get started with Vuetify. The framework’s material design aesthetic gave my application a clean and modern look. I particularly liked how Vuetify handled tabs and navigation, making it easy to create a responsive and user-friendly interface.
Quasar: A Newcomer Worth Exploring
Finally, I tried Quasar, a UI framework that was new to me. I was pleasantly surprised by how easy it was to use, despite being unfamiliar with it. Quasar’s installation process was straightforward, and I loved how it simplified my code with its shorthand notation. My application was looking better than ever!
The Verdict
In the end, all three frameworks transformed my bare-bones application into something beautiful. Each framework had its strengths and weaknesses, but ultimately, it came down to personal preference. BootstrapVue was familiar and easy to use, Vuetify offered a sleek material design aesthetic, and Quasar surprised me with its ease of use and simplicity.
Try It Out
Want to see the complete source code for each framework? Check out the GitHub repository to explore the different versions. And, if you’re interested in monitoring and tracking Vue.js mutations for all of your users in production, try LogRocket.