Visit this link to access the example in incognito mode. Click on the "open" button to open the sample signin form, then click on the "Sign Up" button to trigger the challenge. There seems to be an issue with using recaptcha inside a dialog. I'm not sure if it's fixable or if it requires some sort of hack with CSS and HTML. I tried adjusting the z-index on the dialog but that didn't work at all.
https://i.sstatic.net/EdDvF.png
HTML
<div id="app">
<div class="container my-4">
<div class="row justify-content-center">
<div class="col-md-8">
<h2 class="text-center mb-4">
Sign Up Form with Google reCAPTCHA
</h2>
<dialog ref="mydialog">
<form
method="post">
<div class="form-group">
<input
type="email"
name="email"
class="form-control"
placeholder="Enter your e-mail address"
required />
</div>
<div class="form-group">
<input
type="password"
name="password"
class="form-control"
placeholder="Enter your password"
required />
</div>
<div class="form-group">
<vue-recaptcha
ref="recaptcha"
size="invisible"
:sitekey="sitekey"
@verify="register"
@expired="onCaptchaExpired"
/>
<button
type="submit"
class="btn btn-primary btn-block"
@click="validate">
Sign Up
</button>
</div>
</form>
</dialog>
<button @click="openDialog">open</button>
</div>
</div>
</div>
</div>
JS
new Vue({
el: '#app',
components: { VueRecaptcha },
data () {
return {
email: null,
password: null,
recaptchaToken: null,
sitekey: '6Lfe33gUAAAAAMCuDwRfhSUV4sGkqGDaGrKqjkmZ'
}
},
methods: {
openDialog() {
this.$refs.mydialog.showModal();
},
register () {
// make post request to the server
},
validate () {
// if validate true exec recaptcha
this.$refs.recaptcha.execute()
},
onCaptchaExpired () {
this.$refs.recaptcha.reset()
}
}
});