Press "Enter" to skip to content

🎉A Verification Code Input For Vue.js

vue verification code input is a really simple verification code (also called PIN) input component for Vue.js. Supports both numbers and text.

verification code input html, verification code input angular, npm react verification code input

👷‍♂️ Emoji Captcha Verification For Websites | eCaptcha

How to make use of it:

Install & Download:

# NPM
$ npm i vue-verification-code-input --save

1. Import the component.

import CodeInput from "vue-verification-code-input";

2. Basic usage:

<template>
  <div id="app">
    <CodeInput :loading="false" class="input" v-on:change="onChange" v-on:complete="onComplete" />
  </div>
</template>
export default {
  name: "app",
  components: {
    CodeInput
  },
  methods: {
    onChange(v) {
      console.log("onChange ", v);
    },
    onComplete(v) {
      console.log("onComplete ", v);
    }
  }
};

3. All possible props:

type: {
  type: String,
  default: "number" // or text
},
className: String,
fields: {
  type: Number,
  default: 6
},
fieldWidth: {
  type: Number,
  default: 58
},
fieldHeight: {
  type: Number,
  default: 54
},
autoFocus: {
  type: Boolean,
  default: true
},
disabled: {
  type: Boolean,
  default: false
},
required: {
  type: Boolean,
  default: false
},
title: String,
change: Function,
complete: Function,
loading: {
  type: Boolean,
  default: false
}

Verification Code Input, vue-verification-code-input Plugin/Github


See Demo And Download

Official Website(suweya): Click Here

This superior jQuery/javascript plugin is developed by suweya. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *