Getting started with Vue.js

So, what is Vue.js?

Vue.js is a front-end framework, and design to make developing Single Page Applications (SPAs) a breeze. After working at Google, Evan You created Vue.js in 2014. You's main objective was to take all of the good parts of the Angular framework and make a more lightweight framework, which is the main draw of Vue.js.

Vue.js is one of the "big three" front-end frameworks, the other two being Angular and React. Aside from syntax the largest differences between Vue.js, React, and Angular is the level of rigidity. Angular is a very opinionated front-end framework, meaning there is generally only one right way to achieve a desired effect, while react is on the opposite side of the spectrum and allows devs to achieve the same effect in a multitude of ways. Vue.js sits right in the middle of the two of them, which, in my opinon, is why its a great first framework to learn.

Getting Started

The first thing that you will need to do is to get Vue.js set up. There are two different ways to do this:

1. Using a CDN and linking Vue.js in an HTML file
2. Using the Vue.js CLI tools and installing Vue.js on your machine

Today we are going to be using the Vue.js CLI tools. The first thing you will need to do is make sure that you have node installed. You can check if you have node installed by running $node -v in your terminal. If you do not have Node installed you will need to run $npm install -g npm. Next, run $ npm install vue to install the latest version of Vue.js onto your computer.

Now that Vue.js is installed, make a file where your new app will live, cd into that file and run $vue create name-of-project. This will initiate an options list to configure how Vue CLI scaffolds your application. You can either choose a Vue 2 default that uses Vue version 2.x, a Vue 3 default that uses Vue version 3.x, or manually select features. Manually selecting features allows you to add things like Vuex or Vue Router. There are also other options like end to end testing, Progressive Web App (PWA) support, and CSS Pre-processors allowing you to style with SASS.

You can use the up and down arrows to select which option you would like to toggle and then use the space bar to toggle the option. Continue to select configurations, and make sure to pay attention to which version of Vue.js you select to use in your project as all features are not supported by all versions. Once you select all of the required options your Vue.js app is ready to rock!

Test it out by running $npm run serve in your terminal!

Setting up a Vue.js template

For those coming from React the first, and largest, difference you will see in Vue.js is how components and views are set up. In react you will see that all of the JavaScript and HTML are written together in a syntax called JSX, where as in Vue.js, there is a little bit more of a separation of concerns.

There are three main parts to a Vue.js component:

1. Template
2. Script
3. Style

Template

The template section is where all of the HTML goes for the component or view that is being developed. HTML tags are able to accept dynamic data by using the {{Mustache syntax}}. Adding double curly braces inside fo an HTML element enables the ability to add data using JavaScript syntax (data.pieceOfData). Furthermore, the Mustache syntax also allows you to write Vanilla JavaScript between the double curly braces... pretty cool, right?

Style

The style tag is fairly basic but does have the ability to be scoped or global. By adding scoped to the style tag, all of the styles will be local to ONLY the component or view that is currently being worked on. If global styles are required, it's recommended to write them in the App.vue file.

Script

This is where all of the real magic happens. Inside of the script tag lives all of the methods, props, state, and data for a view or component.

Data and Computed

The data option in the script tag is a function that returns static data. This is where data that does not have stateful behavior, and does not need to be reactive to the users behavior can be declared. The data function will always need to return an object of the static data.

<script>
  export default {
   data: {
      firstName: 'Foo',
      lastName: 'Bar',
    }
  }
</script>

The computed option allows for data to be manipulated and then return in the template. For the above data, if we needed an element to have read out a fullName, you could simple created a function in the computed section that computes the full name for you, and returns it.

<template>
  <div id="demo">{{fullName}}</div>
</template>

<script>
  export default {
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
      },
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  }
</script> 

This fullName function takes our static data of firstName and lastName and concatenates them into a single fullName string that is accessible to the entire component. Computed functions can also be used to update and return data that is in state.

Methods

Simply put, methods are functions that are associated with a particular view or component. These methods can do all sorts of things including fetch and setting data. Here is a simple example with a method called handleClick that will trigger an alert with the string 'learning Vue.js':

<template>
  <a @click="handleClick">Click me!</a>
</template>

<script>
export default {
  methods: {
    handleClick: function() {
      alert('learning Vue.js')
    }
  }
}
</script>

Methods come in handy when paired with v-on directives designed to handle events on elements. When this link is clicked, it will invoke the handleClick method that is defined in the script tag, and the alert will fire.

Props and State

In the props option, this is where you can declare values that will be passed to children components. Props act as custom attributes, declared on a component in the Script tag. To declare props you simple set up a key-value pair within your export default.

State is the current status of the application, and thus how it effects data. Many things can change the state of a piece of data from actions and events, to user verification. State and state management are extremely important topics when discussing SPAs and deserves its own deep dive.

Putting it All Together

So what does it all look like when it comes together? Well, now that you're all set up, it's time to explore. Vue.js is a great way to get comfortable with the main concepts surrounding SPAs, and will hold your hand throughout the process. Make sure to have the docs handy, and leave a comment with a link to your first Vue.js project!

Happy Programming!