Vue-client-recaptcha - Build simple recaptcha for vuejs without server need

Overview

vue-client-recaptcha

Build simple recaptcha for vuejs without need server vue-client-recaptcha

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="[email protected]#$%^&"
      :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

Issues
Remote control Windows machine from anywhere powered by UltraVNC Server and Piping Server

piping-vnc-server-for-windows Remote control Windows machine from anywhere powered by UltraVNC Server and Piping Server How to use Suppose that Window

Ryo Ota 5 Oct 30, 2021
Nuxt client for genealogy project. Family tree and genealogy data processing website software client.

Family Tree 365 - Open Source Family Tree Software - Nuxt Client Description Browser based Genealogy software for interacting and processing data effi

Family Tree 365 74 Jan 17, 2022
Rest-api-client - Easily accessible REST API client available on your favorite browser

REST API Client Website: https://l23de.github.io/rest-api-client/ Inspirations t

Lester Huang 0 Jan 1, 2022
Mdmc-client - Song Client for https://mdmc.moe

mdmc-client To-Do Strengthening safety through ContextIsolation Finding and downloading charts using API from https://mdmc.moe/ Song Library Scanning

Amy Y 0 Jan 4, 2022
A mail creator which only need browser

Vue Recruit Mailer Intro Vue Recruit Mailer is a Frontend-Only web application which powered by Vue.js. What it for Vue Recruit Mailer will help you g

Jerry Lee 5 Apr 1, 2020
Grocery-organizer - Create grocery lists, Recipes, keep track of what ingredients you have/need

Vue-Fire-Tail ?? Demo Here: Vue-Fire-Tail Try Logging with the following Email Address: [email protected] Password: [email protected] Steps Why Vue Fire Tail T

Tom Corey 0 Jan 2, 2022
A simple weather app build with laravel, vuejs, algolia places api and open-weather api

A simple weather app build with laravel, vuejs, algolia places api and open-weather api

Susmoy Sen Gupta 11 Nov 16, 2021
A very simple static homepage for your server.

A dead simple static HOMepage for your servER to keep your services on hand, from a simple yaml configuration file.

Bastien Wirtz 4k Jan 15, 2022
A simple reddit client written as a vue component.

vuereddit A simple reddit client written as a vue component. https://anvaka.github.io/vuereddit/ Usage Install the module first: npm install vuereddit

Andrei Kashcha 12 Nov 16, 2021
MQTT5 Explorer is a simple yet feature-rich client to visualize data of any MQTT broker.

MQTT5 Explorer About this project Project setup npm install Compiles and hot-reloads for development npm run electron:serve Generate app icons npm run

null 2 Oct 22, 2021
Blitz is a simple desktop torrent client for Windows and macOS.

Blitz Blitz is a simple desktop torrent client for Windows and macOS. Building To build Blitz, you'll need Node, NPM or Yarn, and the Vue CLI installe

Jake Rieger 1 Nov 8, 2021
A vue application which provides read-only function without authentication or post module

Elog mobile Elog mobile web pages developed and deployed at CSNS (China Spallation Neutron Source), it is a lightweight web application which provides

null 1 Nov 10, 2021
Vikingo Satellite is a cross-platform utility for exploiting vulnerabilities without explicitly displaying

Vikingo Satellite is a cross-platform utility for exploiting vulnerabilities without explicitly displaying

Vikingo project 3 Dec 11, 2021
Based on ORM technology, the SQLite database is operated by using object without writing any SQL statements.

u-sqlite Based on ORM technology, the SQLite database is operated by using object without writing any SQL statements. SQLite数据库基于ORM技术,使用对象操作,无需编写任何SQ

null 3 Jan 24, 2022
Live crypto price with api - build with vuejs & BS

coinnow - Live Crypto price with multi coins Project setup npm install -or- npm i npm run serve npm run build Try our api - you can add (crypto-coins

Ahmed. 17 Nov 15, 2021
Live crypto price with api - build with vuejs & BS

coinnow - Live Crypto price with multi coins Project setup npm install -or- npm i npm run serve npm run build Try our api - you can add (crypto-coins

Ahmed. 17 Nov 15, 2021
A vuejs project to build a website for student's club called "Young Professional"

youngpro-website Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

Sambany Michel Laurenzio 0 Dec 25, 2021
A Vue.js single page application for basic Management By Objective tasks using ASP .NET Webapi 2 and SQL server

SPA-asp.net-api-vuejs- Single Page Application using ASP .NET and vuejs. NOTE If you are looking for best practices for developing Vue.js application,

Muhammad Ubaid Raza 59 Dec 24, 2021
this is mock server (Vue + TypeScript + Electron)

MockUp Server DownLoad Mac, Windows: https://github.com/joon610/mockup-server/releases ※im' not Apple Developer. so you need clone repo and then build

joon 124 Jan 9, 2022