Get started

Let's get started with vue-recaptcha.

What is vue-recaptcha

vue-recaptcha is just a wrapper to provide an easier interface for Google's reCAPTCHA

• component that is easy to use
• composable to integrate into your own app

vue-recaptcha is not for:

• customize reCAPTCHA UI
• provide features that is not implemented by Google reCATPCHA, like change language on the fly

Installation

Setup vue-recaptcha plugin

import { VueRecaptchaPlugin } from 'vue-recaptcha'

const app = createApp(App)
app.use(VueRecaptchaPlugin, {
  v2SiteKey: 'YOUR_V2_SITEKEY_HERE',
  v3SiteKey: 'YOUR_V3_SITEKEY_HERE',
})

Please replace YOUR_V2_SITEKEY_HERE and YOUR_V3_SITEKEY_HERE with your keys. If you don't have one, please go to here and apply one

Not both of the sitekey is required, if you only need reCAPTCHA v2, just provide the v2SiteKey

In this document, if you see v2 which means you'll need to pass v2SiteKey and v3 means you'll need v3SiteKey

Provide reCAPTCHA script

To load the reCAPTCHA script, you will need to call useRecaptchaProvider in your app.vue

<script setup lang="ts">
import { useRecaptchaProvider } from 'vue-recaptcha'

useRecaptchaProvider()
</script>

<template>
  <div id="app">
    <router-view />
  </div>
</template>

That's all, now you can start using vue-recaptcha. Please see components for quick introduce for all of the components

Usage without unhead

If you are not using @unhead/vue or @vueuse/head, you can simply import the plugin from vue-recaptcha/head

import { VueRecaptchaPlugin } from 'vue-recaptcha/head'

const app = createApp(App)
app.use(VueRecaptchaPlugin, {
  v2SiteKey: 'YOUR_V2_SITEKEY_HERE',
  v3SiteKey: 'YOUR_V3_SITEKEY_HERE',
})

With this version, it will inject the reCAPTCHA script by simply creating a script tag in document head