For package versions >= 2.2.0, you can use a lightweight Vue component. You must first publish the component to your project to gain control over the file and its configuration.
1. Publish the component
Run the following Artisan command to publish the Vue component file to js/components/googlerecaptchav3/GoogleReCaptchaV3.vue:
2. Integrate into your Vue application
Import the component and register it. You can provide the site-key via a prop or by hard-coding it directly into the published component file.
Supported Props:
siteKey: The reCAPTCHA site key string.id: The HTML ID for the component.inline: Boolean to enable inline mode.action: The reCAPTCHA action name (e.g., contact_us).v-model: Binds the reCAPTCHA response token to your form data.
Important: You must call .execute() on the component ref every time you submit a form to refresh the reCAPTCHA token.
$ php artisan vendor:publish --provider="TimeHunter\LaravelGoogleReCaptchaV3\Providers\GoogleReCaptchaV3ServiceProvider" --tag=googlerecaptchav3.vuejs
<template>
<div class="container">
<form @submit.prevent="submit">
<google-re-captcha-v3
v-model="form.gRecaptchaResponse"
ref="captcha"
:site-key="mySiteKeyVariable"
id="contact_us_id"
inline
action="contact_us"
></google-re-captcha-v3>
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
import GoogleReCaptchaV3 from '../../components/googlerecaptchav3/GoogleReCaptchaV3';
export default {
components: {
GoogleReCaptchaV3
},
data() {
return {
form: {
gRecaptchaResponse: null
},
mySiteKeyVariable: 'Your Site Key String',
}
},
methods: {
submit() {
axios.post('/verify', this.form).then(
response => {
this.$refs.captcha.execute(); // Refresh token on success
}
).catch(
error => {
this.$refs.captcha.execute(); // Refresh token on error
});
}
}
}
</script>
