From Bare Bones to Beautiful: Transforming a Vue.js Application with UI Frameworks

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.

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.createApp(App).use(router).mount('#app')

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.

<template>
  <div>
    <b-navbar toggleable="lg" type="dark" variant="dark">
      <b-navbar-brand href="#">My App</b-navbar-brand>
    </b-navbar>
  </div>
</template>

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.

<template>
  <div>
    <v-app>
      <v-main>
        <v-container>
          <v-tabs>
            <v-tab>Cats</v-tab>
            <v-tab>Pictures</v-tab>
            <v-tab>Contact</v-tab>
          </v-tabs>
        </v-container>
      </v-main>
    </v-app>
  </div>
</template>

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.

<template>
  <q-page>
    <q-toolbar>
      <q-btn flat round dense icon="menu" />
      <q-toolbar-title>My App</q-toolbar-title>
    </q-toolbar>
  </q-page>
</template>

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
• 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.