Create a PIN Pad 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 PIN pad 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 pin-pad

and select all the default options to create the project.

Create the PIN Pad

To create the PIN pad, we write:

<template>
  <div>{{ pin }}</div>
  <div>
    <div>
      <button @click="pin += '1'">1</button>
      <button @click="pin += '2'">2</button>
      <button @click="pin += '3'">3</button>
    </div>
    <div>
      <button @click="pin += '4'">4</button>
      <button @click="pin += '5'">5</button>
      <button @click="pin += '6'">6</button>
    </div>
    <div>
      <button @click="pin += '7'">7</button>
      <button @click="pin += '8'">8</button>
      <button @click="pin += '9'">9</button>
    </div>
    <div>
      <button @click="pin = pin.slice(0, pin.length - 1)">&lt;</button>
      <button @click="pin += '0'">0</button>
      <button @click="pin = ''">C</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      pin: "",
    };
  },
};
</script>

We display the pin at the top of the template.

Then we add buttons into the div.

In the number keys, we have the @click directive to append the corresponding characters to pin .

The backspace (<) button calls slice to return the pin string without the last character and assign it to pin .

And the C key clears the pin by assigning it to an empty string.

Now when we click on the keys, we see the PIN update.

Conclusion

We can create our own PIN pad easily with Vue 3 and JavaScript.