Package Exports

vue-recaptcha-v3-esm
vue-recaptcha-v3-esm/dist/ReCaptchaVuePlugin.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-recaptcha-v3-esm) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue reCAPTCHA-v3

A simple and easy to use reCAPTCHA (v3 only) library for Vue based on reCAPTCHA-v3.

The latest version of this package supports Vue 3! See here for Vue 2 usage.

Install

With NPM:

$ npm install vue-recaptcha-v3

With Yarn:

$ yarn add vue-recaptcha-v3

Prerequisites

To use this package you only need a valid site key for your domain, which you can easily get here.

Usage

import Vue from 'vue'
import { VueReCaptcha } from 'vue-recaptcha-v3'

// For more options see below
Vue.use(VueReCaptcha, { siteKey: '<site key>' })

new Vue({
  methods: {
    async recaptcha() {
      // (optional) Wait until recaptcha has been loaded.
      await this.$recaptchaLoaded()

      // Execute reCAPTCHA with action "login".
      const token = await this.$recaptcha('login')

      // Do stuff with the received token.
    }
  },
  template: '<button @click="recaptcha">Execute recaptcha</button>'
})

Vue 3 Composition

import { createApp } from 'vue'
import { VueReCaptcha, useReCaptcha } from 'vue-recaptcha-v3'

const component = {
  setup() {
    const { executeRecaptcha, recaptchaLoaded } = useReCaptcha()

    const recaptcha = async () => {
      // (optional) Wait until recaptcha has been loaded.
      await recaptchaLoaded()

      // Execute reCAPTCHA with action "login".
      const token = await executeRecaptcha('login')

      // Do stuff with the received token.
    }

    return {
      recaptcha
    }
  },
  template: '<button @click="recaptcha">Execute recaptcha</button>'
}

createApp(component)
  .use(VueReCaptcha, { siteKey: '<site key>' })

TypeScript + Vue 3

To get type suggestions for instance variables (this is not needed for composition API), create a new file called shims-vue-recaptcha-v3.d.ts and put the following inside it:

import { ReCaptchaInstance } from 'recaptcha-v3'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $recaptcha: (action: string) => Promise<string>
    $recaptchaLoaded: () => Promise<boolean>
    $recaptchaInstance: ReCaptchaInstance
  }
}

Options

This plugin offers optional options to configure the behavior of some parts.

Available options:

Name	Description	Type	Default value
siteKey	The site key for your domain from Google.	string	none
loaderOptions	Optional options for the recaptcha-v3 loader. The available options are described here.	object	`null`

Usage

To use the options just pass an object to the Vue.use(...) method. For example:

import Vue from 'vue'
import { VueReCaptcha } from 'vue-recaptcha-v3'

Vue.use(VueReCaptcha, {
  siteKey: '<site key>',
  loaderOptions: {
    useRecaptchaNet: true
  }
})

Advanced usage

Some topics which are not commonly used, but required in some cases.

Access reCAPTCHA-v3 instance

In some cases it's necessary to interact with the reCAPTCHA-v3 instance, which provides more control over reCAPTCHA.

const recaptcha = this.$recaptchaInstance

// Hide reCAPTCHA badge:
recaptcha.hideBadge()

// Show reCAPTCHA badge:
recaptcha.showBadge()