Create a simple Vue calculator

Even though Vue.js is capabilities are endless, the framework can not only be used for complex tasks. One of the features of Vue is its simplicity. And that means that it is perfect for smaller tasks. One of the functionalities you might have on your website, might be a calculator. For this purpose you can use a Vue simple calculator component – vue-webpack-calculator.

Check on GitHub

How to install simple Vue calculator

If you are willing to try the vue-webpack-calculator component, you can do so by cloning tit from the GitHub repository:

git clone https://github.com/CaiYiLiang/simply-calculator-vuejs

After that, change the directory to the folder with code of cloned repository:

cd simply-calculator-vuejs

The following step would be to install the needed dependencies. And this could be done with npm:

npm install

Everything should go fluently, and as a result, you will be able to start the local server with a component loaded. By default it will be served as http://localhost:8080:

npm run dev

Optionally you can build this for production. Following command will execute code mimification:

npm run build

Implementing calculator component into your application

That’s it, now you have a simple component that is capable of doing basic math operations. You might incorporate it into your other functionality. For example, you might create this code chunk into your App.vue file:

<template>
  <div id="calculator">
    <header>
      <h1>Calculator</h1>
      <span class="author">BY <a href="https://www.freecodecamp.com/caiyiliang" target="_blank">CaiYiLiang</a></span>
    </header>
    <section class="calculator" id="calculator">
      <calculator-content></calculator-content>
    </section>
  </div>
</template>

<script>
import CalculatorContent from 'components/CalculatorContent.vue'
export default {
  name: 'calculator',
  components: {
    CalculatorContent
  }
 }

</script>

<style>

@import url('https://fonts.googleapis.com/css?family=Pacifico');


html{
   font-size:62.5%;  /* =10px */
}

body{
  background-color:#f4f1f1; /* HEX */
}


header{
  font-size: 1.8rem;
  font-family: 'Pacifico', cursive;
}

header .author{
  font-size: 1.5rem;
}

header .author a{
  text-decoration: none;
}

header , .calculator {
  margin: 2.5rem auto;
  text-align: center;
}

.calculator{
  border: 0.8rem solid #f67373;
  width: 34rem;
  height: 40rem;
  background-color: #f28080;
  font-size: 1.6rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
  border-radius: 1rem;: 
  -webkit-box-shadow: 1rem 1rem 0.5rem #ccc;
  box-shadow: 1rem 1rem 0.5rem #ccc;
  
}


</style>

And in your main.js script, you might define it like this:

import Vue from 'vue'
import Calculator from './Calculator.vue'

new Vue({
  el: '#calculator',
  render: h => h(Calculator)
})