Vue-recaptcha NPM

vue-recaptcha

Description

Google ReCAPTCHA component for vue. If you like this package, please leave a star on github.

This version is for Vue 2.0. If you need Vue 1.x support please reference to vue-v1.x.

Install

NPM (Recommend)

$ npm install --save vue-recaptcha

CDN

<script src="https://unpkg.com/vue-recaptcha@latest/dist/vue-recaptcha.js"></script>
<!-- Minify -->
<script src="https://unpkg.com/vue-recaptcha@latest/dist/vue-recaptcha.min.js"></script>

Usage

Get started

import Vue from 'vue'
import VueRecaptcha from 'vue-recaptcha'

Vue.use(VueRecaptcha)

If you are still using commonjs or load the vue-recaptcha from CDN, you'll need:

// commonjs
const Vue = require('vue')
const VueRecaptcha = require('VueRecaptcha').default
Vue.use(VueRecaptcha)
// CDN
Vue.use(VueRecaptcha.default)

Then include vue-recaptcha in your app.

<template>
  <vue-recaptcha sitekey="Your key here"></vue-recaptcha>
</template>

<script>
  export default {
    ...
  };
</script>

Bind Challenge to Button

<template>
  <vue-recaptcha sitekey="Your key here">
    <button>Click me</button>
  </vue-recaptcha>
</template>

<script>
  export default {
    ...
  };
</script>

Notice: You could only place one element as vue-recaptcha child.

For more information, please reference to example

Configure Language

By default recaptcha will automatically detect user's language. If you need to force the component to render in another language, you can configure it like this:

import Vue from 'vue'
import VueRecaptcha from 'vue-recaptcha'

Vue.use(VueRecaptcha, {language: 'en'})

Please notice that it's not possible to change recaptcha language without page reload.

Advanced Usage

You can directly import VueRecaptcha component like this:

<template>
  <vue-recaptcha sitekey="Your key here"></vue-recaptcha>
</template>
<script>
  import {VueRecaptcha} from 'vue-recaptcha'
  export default {
    components: {VueRecaptcha}
  }
</script>

This will disable the "autoload the recaptcha api" if you doesn't install the VueRecaptcha plugin.

API

Props

sitekey (required)
ReCAPTCHA site key
theme (optional)
The color theme for reCAPTCHA, default is light, available values: dark, light
size (optional)
The size of reCAPTCHA, default is normal, available values: normal, compact, invisible
tabindex (optional)
The tabindex of reCAPTCHA, default is 0
badge (optional) (Invisible ReCAPTCHA only)
Position of the reCAPTCHA badge, default is bottomright, available values: bottomright, bottomleft, inline

For more information, please reference to ReCAPTCHA document and Invisible ReCAPTCHA document.

Methods

reset
Reset reCAPTCHA instance
execute
Invoke reCAPTCHA challenge

Events

verify(response) Emit on reCAPTCHA verified response is the successful reCAPTCHA response
expired() Emit on reCAPTCHA expired
render(id) Emit on reCAPTCHA mounted on DOM id is the widget id of the component

FAQ

What is "ReCAPTCHA couldn't find user-provided function: vueRecaptchaApiLoaded"?

It's because google's recaptcha have been loaded before your app. You can simply ignore it because vue-recaptcha can still detect and render recaptcha. If you care about this, try to move the script tag of recatpcha after to your app.