How to Add Google Recaptcha V3 by Vue-recaptcha-v3

Google reCAPTCHA is a free service from Google that helps protect websites from spam and abuse. The difference between google Recaptcha v2 vs v3 is that in v2 users get the challenge to solve captcha but in v3 user does not get any challenge. Instead, it generates a probability score based on your web browsing behavior.

Vue reCAPTCHA-v3 is a simple and easy-to-use reCAPTCHA V3 library for Vue based on reCAPTCHA-v3. So today I will explain the steps to use the Vue reCAPTCHA-v3 in the Vue js component.

Installation

You can install it via npm or yarn.

Npm

$ npm install vue-recaptcha-v3

Yarn

$ yarn add vue-recaptcha-v3

Prerequisites

If you wanted 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

Option 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
  }
})

If you want to learn more about this package, you can visit its documentation on Github.