Vue.js is one of the leading JavaScript libraries out there, which is easy to get started and very scalable at the same time. Similarly, CSS3 Flexbox is a relatively new feature that makes our design process simpler. This is a tutorial on creating a simple calculator using Vue.js CLI and CSS3 Flexbox. This post first appeared on Laccadive IO Blog.

---

Getting Started

To get started with the Vue.js CLI, we have to first install the NPM package globally.

$ npm install -g vue-cli

Next, we have to move to a specific directory, where we want to create the project and perform an initialization:

$ vue init webpack vue-calc

where ‘webpack’ is the template name and ‘vue-calc’ is the name of our project.

This will prompt you for more details to create the project. Like this:

Next you need to perform the three suggested commands:

$ cd vue-calc
$ npm install
$ npm run dev

This will move into the project directory, install the relevant packages, run a node development server on port:8080 and open up the browser to load the following.

Now comes the interesting part.

The Project Directory

Vue.js works using components, similar to React. Our code will therefore be inside the ‘components’ folder:

Create a new file inside the components folder and and name it ‘Calculator.vue’.

Vue.js code

There are multiple ways to write code in Vue, one is to write it within script tags. Another way is to write it in a component style, which we are doing in this example.

In a component, we have three main elements:
1. <template> – this is where our HTML is written
2. <script> – the JS code goes here
3. <style> – the CSS goes here

The following gist contains the code that will go into Calculator.js: Get the code!

Copy the whole page and paste it inside Calculator.js.

Now we have to give a reference to Calculator.vue from App.vue. Open App.vue and replace the following inside the script tags:

import Calculator from './components/Calculator'

export default {
 name: 'app',
 components: {
 Calculator
 }
}

The following are some pointers for each of the three sections of code:

Template

• Whatever is entered {{ withinDoubleCurlyBraces }} will be taken from script -> data() or from a function inside script -> methods:
• @click is the same as v-on:click, which is an event to be fired on clicking the element
• enterNum(‘7’) and enterSign(‘+’) are methods which enters a number and sign respectively

Script

• Whatever is given as ‘name‘ will be the name of the component
• data () contains the JS variables used within the component
• methods: contain all of the methods used in the component

Style

‘scoped‘ means these styles apply to elements within this component only. This is pretty cool since we don’t have to worry about repeating a class in another component. The following are some CSS Flexbox-specific styles used.

.buttons{ /* for the buton container */ 
 display: flex;
 flex-wrap: wrap;
 padding: 10px;
}

.buttons button { /* for each button */
 flex-grow: 1;
}

.one { /* contains the DEL and C buttons*/
 display: flex;
 flex-grow: 1;
}

Summing up

That’s all folks. Hope you realized how simple it is to get started with Vue.js. In case you would like the full project, please visit the Github Link and feel free to fork the project to improve it further.