I built an SPA in an hour and this is what I learned (Part 1)

SPA! An Hour! Calm down folks. Vue.js is the secret sauce.

So my team mates and I were planning to develop a basic webpage which displays about/contact information of each one of us. Weeks after I came across Quasar, a Vue.js framework. It was interesting and went through a few YouTube tutorials on Vue(Vue.js). And there it was guys. Love at first sight. ❤

Simple. Elegant. Powerful.

So I decided to make that webpage with Vue. I’ll explain step by step process I followed. But before that let me introduce to you my love, Vue ;)

Vue.js is a Progressive Javascript Framework that focuses on building user interfaces. Well even I didn’t digest that part fully :/

In short it helps create beautiful webpages easily. It is a front end framework.

What Vue Offers

• Reactive Interfaces — Dynamically change different parts of the page in accordance to user interaction.
• Declarative Rendering — Allows us to use dynamic variables.
• Data Binding — Bind data to UI elements.
• Directives — Compiler directives.
• Template Logic — if-else, loops, etc…
• Components & Nesting — The coolest thing about Vue. They help us extend basic HTML elements to encapsulate reusable code. At a high level, Components are custom elements that Vue.js’ compiler would attach specified behavior to.
• Event Handling
• Computed Properties
• CSS Transitions & Animations
• Custom Filters

OK, now that aside, lets start coding.

Step 1

Install Vue.js & Setup project

There are a number of ways to implement Vue.js

• Include the <script> tag in an html file
• Install using NPM
• Use the Vue-cli tool along with Webpack
• Install using the Bower client side package manager

The method I recommend is installation using Vue-cli. It pretty much comes with everything required for development. Fire up a terminal and execute these commands to get started.

$ npm install -g vue-cli //Installs vue-cli globally
$ vue init webpack myapp //Create new project with webpack template

While executing the above commands you’ll be asked some setup questions, answer them and continue.

Output of above command

Now continue by executing following commands

$ cd myapp
$ npm install            //Install dependencies

This will install several dependencies for our project which will be listed in package.json file. Now, if you look into myapp folder you’ll see a structure like this

$ tree myapp

All of our code exist in src folder, and there are a whole bunch of other support files in various folders. Now lets run this template app created by vue-cli.

$ npm run dev

This command will launch our app in the browser. Let’s see what vue-cli has made for us.

Hmm.. Not much but a logo, a title and some links. But that’s a pretty good start. Now lets see what vue-cli has packed in src folder.

$ tree src

The src folder contains two files, App.vue and main.js, and two folders. Assets folder, as the name suggests, it contains all the images and other assets used in the app. And components folder has a vue file in it. We’ll see more about components later on. For the time being lets open main.js and have a look inside.

So here in main.js we created an instance of Vue. It has got some parameters.

• el — This corresponds to the id of the div we are binding this Vue instance to. It’s app in this case. Check index.html in myapp folder and we’ll see a div with this id.

• template — Vue.js uses an HTML-based template syntax that allows us to declaratively bind the rendered DOM to the underlying Vue instance’s data.
• components — Specifies the main component App

OK. Now lets look into App.vue

App.vue can be split into three main sections:

• HTML — This part defines our template tag
• Script — A JavaScript portion which imports another vue file. Hello.vue which infact is a component
• CSS — A style definition for the current component

The above two files will be untouched most of the time. All the time we’ll be dealing with components only. Lets have a look at our component Hello.

As you can see Hello.vue and App.vue have similar structures. This is because App.vue is also a component by itself. All the content we saw on the webpage is from Hello.vue. In the style section of our component Hello we used an attribute scoped with the style tag, this attribute is used to contain the CSS to this component only.

That’s all for the installation and setup. We’ll dive deeper into Vue.js in next part of this article.

Follow and stay tuned for the next part.