Create a Simple Calculator with Vue 3 and JavaScript

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a simple calculator with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create calculator

and select all the default options to create the project.

We also need the Math.js package to let us evaluate math expression strings.

To install it, we run:

npm install mathjs

Create the Calculator

We can create the calculator by writing:

<template>
  <div>
    <div>{{ expression }}</div>
    <form @submit.prevent="calculate">
      <div>
        <button type="button" @click.stop="expression += '+'">+</button>
        <button type="button" @click.stop="expression += '-'">-</button>
        <button type="button" @click.stop="expression += '*'">*</button>
        <button type="button" @click.stop="expression += '/'">/</button>
      </div>
      <div>
        <button type="button" @click.stop="expression += '.'">.</button>
        <button type="button" @click.stop="expression += '9'">9</button>
        <button type="button" @click.stop="expression += '8'">8</button>
        <button type="button" @click.stop="expression += '7'">7</button>
      </div>
      <div>
        <button type="button" @click.stop="expression += '6'">6</button>
        <button type="button" @click.stop="expression += '5'">5</button>
        <button type="button" @click.stop="expression += '4'">4</button>
        <button type="button" @click.stop="expression += '3'">3</button>
      </div>
      <div>
        <button type="button" @click.stop="expression += '2'">2</button>
        <button type="button" @click.stop="expression += '1'">1</button>
        <button type="button" @click.stop="expression += '0'">0</button>
        <button type="submit">=</button>
      </div>
      <div>
        <button type="button" @click.stop="expression = ''">Clear</button>
      </div>
    </form>
  </div>
</template>

<script>
import { evaluate } from "mathjs";

export default {
  name: "App",
  data() {
    return {
      expression: "",
    };
  },
  methods: {
    calculate() {
      this.expression = evaluate(this.expression);
    },
  },
};
</script>

<style scoped>
button {
  width: 20px;
}

#clear-button {
  width: 50px;
}
</style>

First, we add the expression string to the top of the template.

Then, we add the buttons for the calculator.

They are used for letting us append characters to the expression we are evaluating.

We do this by concatenating characters to the expression reactive property.

All except one button is set to type button so that we won’t run the calculate method until the = button is clicked.

Also, we have the stop provider to stop the propagation of the click event.

In the component object, we have the calculate method to evaluate the expression we entered.

We have the @submit.prevent directive to let us call calculate when we submit the form when we click =.

prevent lets us prevent the default server-side submission mechanism.

We call the evaluate method from mathjs to evaluate the expression we entered.

Then we set the this.expression reactive property to the returned result.

In the style tag, we set the button width to 20px, and we set the clear button to 40px so that the text will be inside the button.

Conclusion

We can add a simple calculator easily with Vue 3 and JavaScript.