A Neumorphism Styled Pincode Input Field for Vue.js

Share Your Love

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

EventDescription
pincodeIs triggered when the pincode is four characters long and passes it as parameter

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:

https://github.com/weslinkde/vue-pincode

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

Share Your Love
Avatar photo
Lingaraj Senapati

Hey There! I am Lingaraj Senapati, the Founder of lingarajtechhub.com My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.

Articles: 429

Newsletter Updates

Enter your email address below to subscribe to our newsletter