Vite

Install the required package using your preferred package manager:

npm install @google-recaptcha/vue

pnpm add @google-recaptcha/vue

yarn add @google-recaptcha/vue

bun add @google-recaptcha/vue

Set up the reCAPTCHA plugin in your main application file:

src/main.ts

import { createApp } from 'vue'
import { googleReCaptcha } from '@google-recaptcha/vue'

import App from './App.vue'

const app = createApp(App)

app.use(googleReCaptcha, {
  type: 'v3',
  siteKey: 'your_site_key'
})

app.mount('#app')

Create a component to use reCAPTCHA:

<template>
  <form @submit.prevent="onSubmit">
    ...
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { useGoogleReCaptcha } from '@google-recaptcha/vue'

const googleReCaptcha = useGoogleReCaptcha()

const onSubmit = async () => {
  const token = await googleReCaptcha.executeV3('action')
  ...
}
</script>