vue-client-recaptcha

Build simple recaptcha for vuejs without need server

Dependencies

  • required: Vuejs >= 3.x

Installation

npm install vue-client-recaptcha --save

yarn add vue-client-recaptcha

Usage

  1. You can import globally in your vue-3 project (main.js)
    import { createApp } from 'vue'
    import VueClientRecaptcha from 'vue-client-recaptcha/dist/vue-client-recaptcha.es'
    
    const app= createApp(App)
    app.component("VueClientRecaptcha", VueClientRecaptcha);
  1. You can import localy in your vue-3 component
    import VueClientRecaptcha from 'vue-client-recaptcha/dist/vue-client-recaptcha.es'
    
    <!--Optional style.css-->
    import 'vue-client-recaptcha/dist/style.css';
    
    export default {
      components: {
        VueClientRecaptcha,
      },
    }

Props

Name Description Type Default
val width of captcha image. string ``
numbers height of captcha image. string[] 0123456789
capitalCaseLetters fontSize of captcha characters. string[] ABCDEFGHIJKLMNOPQRSTUVWXYZ
lowerCaseLetters fontFamily of captcha characters. string[] abcdefghijklmnopqrstuvwxyz
showNumbers fontColor of captcha characters. boolean true
showCapitalCaseLetters characters that captcha should be made with. boolean true
showLowerCaseLetters count of characters that captcha should be made with. boolean true
count number of character number 5
hideLines hide dirty line and make captcha simple boolean false
customTextColor set text color for characters string ``
width width of captcha any count * 30
height width of captcha number 50
canvasClass can set custom class for canvas string ``

Events

Event Value Description
@isValid Boolean can listen to payload , if your value and captcha code same return True otherwise return False
@getCode String can listen to payload , get captcha value and set variable

Slots

Name Description
icon can set your custom template for icon or changed to text (default icon is 'refresh' from fontawsome also you can change it with props

Examples

<template>
  <div class="sample-captcha">
    <input type="text" v-model="inputValue" />

    <VueClientRecaptcha
      :value="inputValue"
      @getCode="getCaptchaCode"
      @isValid="checkValidCaptcha"
    />
  </div>
</template>

<script>
import { ref } from "vue";
import VueClientRecaptcha from "vue-client-recaptcha/dist/vue-client-recaptcha.es";
import "vue-client-recaptcha/dist/style.css";
export default {
  components: {
    VueClientRecaptcha,
  },
  setup() {
    /* pass value to captcha  */
    const inputValue = ref(null);

    const getCaptchaCode = (value) => {
      /* you can access captcha code */
      console.log(value);
    };
    const checkValidCaptcha = (value) => {
      /* expected return boolean if your value and captcha code are same return True otherwise return False */
      console.log(value);
    };
    return {
      inputValue,
      getCaptchaCode,
      checkValidCaptcha,
    };
  },
};
</script>

SampleSimpleMode

<template>
  <div class="sample-captcha">
    <input type="text" v-model="inputValue" />
    <!-- Hide Letters And Show NumbersOnly Without Lines -->
    <!-- Can Set Your Custom Icon Or Text With Slot -->
    <VueClientRecaptcha
      :value="inputValue"
      :hideLines="true"
      :show-capital-case-letters="false"
      :show-lower-case-letters="false"
      custom-text-color="black"
      @getCode="getCaptchaCode"
      @isValid="checkValidCaptcha"
    >
      <template #icon>
       <span style="color:blue">with Custom Text Or Icon</span> 
        </template>
    </VueClientRecaptcha>
  </div>
</template>

<script>
import { ref } from "vue";
import VueClientRecaptcha from "vue-client-recaptcha/dist/vue-client-recaptcha.es";
import "vue-client-recaptcha/dist/style.css";
export default {
  components: {
    VueClientRecaptcha,
  },
  setup() {
    /* pass value to captcha  */
    const inputValue = ref(null);

    const getCaptchaCode = (value) => {
      /* you can access captcha code */
      console.log(value);
    };
    const checkValidCaptcha = (value) => {
      /* expected return boolean if your value and captcha code are same return True otherwise return False */
      console.log(value);
    };
    return {
      inputValue,
      getCaptchaCode,
      checkValidCaptcha,
    };
  },
};
</script>

SampleWithCustomLetter

<template>
  <div class="sample-captcha">
    <input type="text" v-model="inputValue" />
    <!-- Hide CapitalCase And Number And Set Custom Carachters -->
    <!-- Set 10 Charachter -->
    <VueClientRecaptcha
      :value="inputValue"
      :show-capital-case-letters="false"
      :show-numbers="false"
      lower-case-letters="!@#$%^&"
      :count="10"
      @getCode="getCaptchaCode"
      @isValid="checkValidCaptcha"
    />
  </div>
</template>

<script>
import { ref } from "vue";
import VueClientRecaptcha from "vue-client-recaptcha/dist/vue-client-recaptcha.es";
import "vue-client-recaptcha/dist/style.css";
export default {
  components: {
    VueClientRecaptcha,
  },
  setup() {
    /* pass value to captcha  */
    const inputValue = ref(null);

    const getCaptchaCode = (value) => {
      /* you can access captcha code */
      console.log(value);
    };
    const checkValidCaptcha = (value) => {
      /* expected return boolean if your value and captcha code are same return True otherwise return False */
      console.log(value);
    };
    return {
      inputValue,
      getCaptchaCode,
      checkValidCaptcha,
    };
  },
};
</script>

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

GitHub

https://github.com/parsajiravand/vue-client-recaptcha