Vue Deconstructed

One of the most pleasing aspects of Vue.js is it’s simplicity. It also happens to be what makes it most frustrating. Head over to their introduction page and you will see how quickly you can get a simple reactive web application up and running. Once you get into building out anything more than the most trivial of applications, however, things start to get bumpy. It is not for lack of good tools or support. In fact it was quite the opposite. The wealth of information can be overwhelming. What follows is my attempt to deconstruct a Vue.js application into it’s core components and demonstrate the tools, terminology, & techniques for scaffolding your own app.

Vue.js labels itself as a reactive system. This means changes to data flow through your application. Think of an Excel spreadsheet. If cell C1 has a formula that references cells A1 and B1 any time you change the values in either A1 or B1 you will see those changes immediately in C1. It is “reacting” to the changes in your data. In the same way components in your app are “reacting” to changes in the data.

The core of a Vue application has two constructs: One is your instance / components, the other is your templates. Although not part of Vue’s core the third construct critical to building a Vue application are routes. If you can get a handle on these three concepts from the beginning you are going to be significantly more successful.

• The instance: This is is where you define the data for our application and the behaviors associated with that data. The data is attributes of the instance and the behaviors come in the form of methods, lifecycle hooks, computed properties.
• Templates: These are how you bind your data to the DOM. Using interpolation and directives you can attach the data from your instance to your application.
• Routes. Routes allow you to take different components, each with their own data and behaviors, and render them as unique pages.

We’ll take a look at each of these individually in the sections that follow.

Before you begin you’ll need some tools in place to build your app. You’ll need the Vue command line interface for when we set up our boilerplate.

$ npm install -g vue-cli

Once the cli is installed initialize a new project using Webpack. If you never used Webpack before it is a module bundler that packages all of the dependencies you need for building an application. Let’s create a app called vue-router:

$ vue init webpack vue-router
$ cd vue-router
$ npm install

When initializing your application it is going to ask you some things about setting up linting, testing, etc. Use your own discretion for these options based on your specific needs. I would suggest turning everything on as they aren’t going to get in the way. It is much easier to enable them now and not use them than to need them later and not have them. Once complete you can run a dev instance:

$ npm run dev

This will spin up a server on http://localhost:8080 that you can then access in your browser. It’ll serve up a HelloWorld page with some generic content.

Your page should look something like this

Go ahead and create a project in your editor / IDE of choice and create a project for this our vue-router directory and start familiarizing yourself with the structure. In the root folder you are going to have an index.html file. This is where we bind to our Vue Instance. Also take note of some of the key subfolders:

• build: these are the fully rendered pages
• config: where you have configuration options for different environments, etc
• src: where your source files live. This is where we will be doing a majority of our work

There are several other files and folders that are beyond the scope of this tutorial so we will be focusing mainly on src. Lastly, before we move on, when you are ready to build your application for production you would run the following from the command line

$ npm run build

This will create the final build output to be published to your web server.

Before we get into modifying any of the source files I highly recommend installing the Chrome Vue.js Dev tools. These will help you to see the values that are stored in our Vue.js instance.

Vue.js Chrome Plugin

You can see from the screenshot that we have our App (this is our instance), our route (HelloWorld), and some data associated with that route (msg) that is currently set to the value “Welcome to Your Vue.js App”. This is then being rendered on the page via the Template underneath the Vue logo.

An application is composed of routes so lets add a new route. Within src/components you will find a file called HelloWorld.vue. This contains the template and components for our HelloWorld route that we saw in the screenshot above. Copy this file and call the new file Test.vue. Then we have to configure the new route. Open src/router/index.js. First, in the import statements, import the new route

import Test from '@/components/Test'

as well as adding the new route to the routes array

export default new Router({
  routes: [
    { ... },
    {
      path: '/test/', // path that will be used in our URL
      name: 'Test', // The name we will use to reference the route
      component: Test // The name of the component we imported above
    }
  ]
})

That is it. We now have a brand new route. You can access it directly by hitting http://localhost:8080/#/test. Right now it is a direct copy of our original route but we’ll take a look at that next

Now that we have a custom route the next thing we want to do is create some data to go along with it. Lets take another look at that Test.vue we created earlier. There is a script tag where we are exporting some data. This is where we define all of our methods and properties. Lets start by renaming our component and adding some new data values

<script>
export default {
  name: 'Test',
  data () {
    return {
      name: 'Brian Greig',
      city: 'Charlotte, NC'
    }
  }
}
</script>

If you save this you should now see in the Vue Dev Tools the new values in your route for name and city. Now if you scroll up to our template you will notice that we have whats called an interpolation. It is basically a value that we inject into the HTML to be replaced with data from Vue.

{{msg}}

We want to update this with our new values. Lets update it to

<p> Welcome {{name}} from {{city}} </p>

And it is as simple as that. You now have a fully functional Vue app. You’ll want to start looking at some of the other ways of manipulating the data and presenting it using methods and directives but, at this point, everything is built on this basic structure.

I would love to know what you think. Reply in the comments below if you would like to see more. Maybe in a follow up post we can look more into directives, lifecycle hooks, whatever y’all are interested in.

References:

https://vuejs.org/v2/guide/
https://router.vuejs.org/en/