CodeBlog.ch

After I published my article about VueStrap things have changed a bit. We now have the awesome version 2 of VueJS and obviously we need to build a UI with it at some point. I took that as a reason to have another look at the UI libraries.

I was able to find a few frameworks for VueJS2. I managed to find three and had a quick look at all of them

• http://vuikit.github.io/vuikit/ Feel clean and simple. Button checkboxes where only the button border changes feels a bit too subtle to me, but overall it looks pretty good.
• http://quasar-framework.org/ Seems to have a focus on mobile devices, but works on a desktop too. Extensive documentation, great first impression.
• http://element.eleme.io/ Unfortunately this is only in Chinese, but some parts are in two languages, that’s good enough to find the component you need. Looks pretty solid too, but seems to have less components than Quasar.

I’ve decided to give Quasar a go as it feels very complete and solid.

Getting started with Quasar Framework.

There’s not much to explain, the documentation is up to date and easy to understand. If you need more details, use the author’s documentation: http://quasar-framework.org/guide/index.html

Here’s what I did:

npm install -g quasar-cli
quasar init quasar-test
cd quasar-test
npm install

No problem there, everything installed fine. It seems like there are two different themes. The default material theme:

quasar dev

A second one called iOS

quasar dev ios

Let’s see how it looks:

Awesome, material and iOS style in a second!

Adding a new Quasar framework component

The first screen is made of the index.vue found in src/components. Let’s try to add a fixed button like shown here: http://quasar-framework.org/components/floating-action-buttons.html

When I tried to remove the logo I received an error:

How awesome is this, it helps me to write nicely formatted code and even tells me right in the browser with live reload. Let’s remove the trailing spaces and give it another try. Spaces removed and it works, no issues at all!

I like tree, the green ones, but also the ones on my screen. Let’s have a look at the documentation: http://quasar-framework.org/components/tree.html

Copy the model data to our index.vue and add the element to the template. Again, everything works smoothly:

I’m impressed with Quasar Framework! The first impression lasts! I played around with a few more things and whatever I do work well. There’s even a live reload plugin for Android. All those features at this quality is amazing.

I recently became quite fond of Vue.JS. It feels like a simpler version of AngularJS 1 / Angular 2 and so far came with everything I was looking for. It took me a while to get everything up and running, npm with all its dependencies, multiple versions and more alpha than beta libraries it can be a bit annoying, but once things are running smooth, it’s quite job. Naturally I need to have some kind of graphical interface.

There’s a great list of Vue.JS libraries, always a good start if you need something: https://github.com/vuejs/awesome-vue

As I’m pretty experiences with bootstrap, I just felt that I should go with something not completely new to me. With currently 2364 stars and a lot of activity just a few hours ago the project seems to be very much alive. I was also happy to see 45 different contributors, the majority of the work done by fewer people though. Here’s the project’s home: https://github.com/yuche/vue-strap.

Getting started

First we have to create a Vue.JS project. Assuming you’ve got node and npm installed, you can install the vue-cli tools to do that:

npm install -g vue-cli

Once you’ve got that installed, you can create a simple project by running this command:

vue init webpack-simple#1.0 vue-strap-test

Please note that I’ve specify version 1 as version 2 isn’t stable yet. Once the project has been created we have to install the npm modules.

cd vue-strap-test
npm install

Now that we’ve got our empty Vue.JS project we have to add VueStrap. We can easily do that by running this command

npm install vue-strap bootstrap style-loader

Please note that I’m also installed bootstrap as we require its CSS and style-loader so that we can easily embed bootstrap from our component. More about that later.

Everything is installed, let’s open src/App.vue and add our components. First we add something to the template section, right after the h1 element:

<alert type="success">
   Success!
</alert>

In the script section we also have to import two files, our VueStrap component and of course bootstrap:

import { alert } from 'vue-strap'
import 'bootstrap/dist/css/bootstrap.css'

And then we also need to make the imported component available by adding these lines:

components: {
   alert
}

The complete component looks like the file shown here https://github.com/ortic/vue.js-ui-test/blob/master/vue-strap-test/src/App.vue

If you then go back to your terminal, you can simply type npm run dev and then open your browser at http://localhost:8080
The nice thing about running dev is that it automatically reload if you change your code. Here are two more changes to the component to add more bootstrap features:

• https://github.com/ortic/vue.js-ui-test/commit/46d553b084eac20fff12788f4369973fd01318bf
• https://github.com/ortic/vue.js-ui-test/commit/609ee8bee2e7e93683364459163b6e9f1a4e28c5

If everything worked, you should some something like this:

Conclusion about VueStrap

Being Bootstrap makes it rather powerful and very familiar to lots of developers, that’s certainly a big plus. I somehow like that they implemented the whole JavaScript part using Vue.JS, that makes it lighter and more Vue.JS like, but reinventing this part might cause some new bugs to show up too. It seems like there are still a few bugs which I can find in very little time. My first attempt with browserify on top of an existing project lead me to this problem. https://github.com/yuche/vue-strap/issues/198. In this attempt, the popover component didn’t seem to work. The DOM gets changed, but the CSS property display is still set to none, here’s the commit https://github.com/ortic/vue.js-ui-test/commit/a3fab52f9195d90995ada87d3e031a30575888ea.

While it seems to be pretty cool, I’m not convinced it’s stable enough to be used in a large scale project unless you’re okay with fixing a few things yourself. It’s free after all and the code isn’t too difficult to understand once you’ve got a hang of Vue.JS. I’ll keep on testing other frameworks to narrow things a bit down.