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>

Events

Project development

• npm run serve compiles and hot-reloads demo for development
• npm run lint lints and fixes files
• npm run build compiles and minifies production files and demo

GitHub:

Please share and comments on this post and wants to improve WhatApps us.