A Neumorphism Styled Pincode Input Field for Vue.js

In this post we are going to discuss about Neumorphism Styled Pincode Input Field for Vue.js.

VuePincode

Neumorphism styled pincode input field for Vue.js.

Features

(Pin: 1234 is the right one)

Simple pincode input field
Neumorphism styling
Smooth animations

Installation

In your Vue.js project:

npm install @weslink/vue-pincode

npm install @weslink/vue-pincode

If you prefer static files, import assets from the `dist` folder

Basic example

Login.vue

<template>
  <div id="app">
    <div class="container">
      <vue-pincode ref="pincodeInput" @pincode="login" />
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import VuePincode from "./components/VuePincode";

export default {
  name: "Login",
  components: {
    VuePincode
  },
  methods: {
    async login(pincode) {
      try {
        const { data } = await axios.post(`/login`, { pincode })
        this.$refs.pincodeInput.triggerSuccess();
        return { success: true, status: data.status }
      } catch (e) {
        this.$refs.pincodeInput.triggerMiss();
        return { success: false, status: e.response.data.status }
      }
    },
  }
};
</script>