A couple of years ago, it was pretty standard to refresh the page every time our users performed an action: saving a form, applying a filter to a search, etc. Making the site reactive and allowing our users to perform these actions without refreshing the page using pure JS, or even Jquery, was (and still is) difficult, unorganized and poorly scalable.
However, new design perspectives, mobile apps and the increasing concern in improving user experience (UX) have left behind the refresh page standard to bet for a reactive and interactive approach. For this reason, several JS frameworks have appeared to offer a proper solution for the implementation of these web applications. One of them, the one we will discuss in this post, is Vue.js.
From my perspective, Vue.js, or simply Vue, is one of the best JS frameworks to create reactive web applications. It is simple enough to be understood easily and fast but powerful enough to be almost limitless thanks to Its approach of creating reusable components that may be personalized easily.
One of the things I like the most about Vue is that it may be easily plugged into an existing HTML template with no need to use Node.js or to compile the JS code. You simply need to load the vue CDN and attach a Vue instance to a div tag. For example:
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script> This will produce a “Hello Vue!” string inside the div tag. It may not seem very powerful, but as we will see next, it is.
But this is not the only way to use Vue, you may also create a Vue app that uses .vue files, and hold all your logic there. This is especially powerful when all your app is going to be reactive. Let’s check how to do it.
Note: Before starting using Vue, you need to have installed Node.js. I strongly recommend to use NVM when using Node dependencies.
In order to create the vue project, run the following steps:
Step 2 will start a wizard. If you are not familiar with Vue, the best thing to do is to use the default options. Once the wizard finishes, it will create a project with the following structure:
As you may see, all our code will be located in the src folder.
If you check main.js file, you will see:
new Vue({
render: h => h(App),
}).$mount('#app') That is very similar to what we did in the previous example. Basically, the vue project sets up an index.html file (located in the public folder) with a <div id=”app”></div> and the main.js attaches our vue app to it.
Also, notice the components folder. It is named components because the core elements of Vue are components. Almost everything you create in Vue will be a component or live inside one. As well, notice that HelloWord.vue is a .vue file, so it needs to be compiled first to be run.
Vue-cli provides services to start a web server and to compile our project. Simply run yarn run serve or npm run serve depending on the package manager you selected. Then, go to http://localhost:8080/ and you will see the vue welcome page. If you want to check its code, it is located at components/HelloWorld.vue.
In order to exemplify the Vue capabilities, we are going to create a simple application: a counter. First, create a file components/Counter.vue and add this code:
<template>
<div class="container">
<span class="count">{{ text }} {{ count }}</span>
<div class="buttons">
<button @click="add">Add</button>
<button :disabled="count == 0" @click="subtract">Subtract</button>
</div>
</div>
</template>
<script>
export default {
name: 'Counter',
props:{
text:{
type: String,
required: true,
}
},
data: function() {
return {
count: 1,
}
},
methods: {
add: function(){
this.count = this.count + 1
},
subtract: function(){
this.count = this.count - 1
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.count{
color: green;
}
</style> As you may see, a vue file is composed by three elements:
As well, your vue component has several keywords that define its behavior. Some of the most common, the ones we are using in the example, are:
If you run your app right now, you will see no changes. This is because we have not used our new component yet. So, let’s do it! Go to App.vue file and replace the template and the script tags, for this
<template>
<div id="app">
<Counter text="apples:" />
<Counter text="carrots:" />
</div>
</template>
<script>
import Counter from './components/Counter.vue'
export default {
name: 'App',
components: {
Counter
}
}
</script> As you may see, we first import our Counter component from its file. Then, in the App component, we use the components keyword to tell Vue that our component will use external components; in this case, Counter.
Then, in the template section, we use our Counter component as a regular HTML tag. Notice that we use the text prop as a regular HTML property. Run your application and you will see the following:
Try playing with the Add and Subtract buttons. Do you notice how each counter is independent even if they both are the same component? As well, try to use the Subtract button until the counter reaches zero. Do you know why the button gets disabled? Check the Counter component code and try to answer that question (hint: check what is different between the add and subtract buttons)
Play a little with the counter component code, modify the methods, add more buttons, modify the template and its styles. You will see how easy and versatile it is to update a component in vue.
This was just a quick peek of all that Vue has to offer. I recommend you to check its official documentation, code the examples and play with the framework; you will be amazed by its power.
Here at Swapps we have developed several projects using Vue. Thanks to its versatility and its component approach we have been able to implement web applications using it with less effort than when we use different frameworks. As well, it has been a great tool to create quick prototypes and to improve the UX in specific pages of some of our sites. The component approach allows big teams to work together on the same project with almost no conflicts and with good integration.
I hope this quick tutorial left you eager to know more about vue and to start using it in your projects. You will not regret it. Happy coding!