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.

Why Vue?

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.

Creating your Vue application.

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:

1. install vue-cli using npm install -g @vue/cli
2. Create the project running vue create my-project

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.

Setting up a basic example: a counter

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:

• Template: this is where you add all of your HTML code. The component variables needs to be rendered using {{}}
• Script: this is where you define your vue component and its functionality.
• Style: this is where you define your component specific style, using CSS or SCSS. Thanks to the scoped keyword, you may isolate the styles you define so they do not have conflicts with other components’ style.

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:

• Props: these are similar to HTML attributes such as href or src. It is the way to pass external data to our component. Vue gives you a lot of control by letting you set the type of variable your component expects, if it is required or not and if it may use a default value; among other settings.
• Data: Here you define the internal variables of your component. These are component scoped, so if several components are used in a page each one of them may have different data values.
• Methods: Here you may define the functions that your component may use. These are also component scoped, so you may not use them in another component unless you pass them via props (although it requires caution to avoid unexpected behaviors).

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!