Sep 24, 2023
0
Level 2
vue-recaptcha: Uncaught (in promise) Error: useRecaptcha() is called without provider.
I'm attempting to integrate vue-recaptcha v3.0.0-alpha.2 into my Laravel v10.10 and Inertia.js v1.0 project. Unfortunately, I'm encountering the following error:
Uncaught (in promise) Error: useRecaptcha() is called without provider.
Pages/Demo.vue
<script setup lang="ts">
import Layout from "@layouts/Layout.vue";
import { ref, computed } from "vue";
import { useRecaptchaProvider, Checkbox } from "vue-recaptcha";
useRecaptchaProvider();
const checkboxWidgetID = ref();
const checkboxResponse = ref();
const checkboxVerified = computed(() => !!checkboxResponse.value);
</script>
<template>
<Layout title="Demo App">
<div class="py-5">
<div class="container py-5">
<div id="checkbox">
<h2>Checkbox</h2>
<Checkbox
v-model="checkboxResponse"
v-model:widget-id="checkboxWidgetID"
/>
<div>widgetID: {{ checkboxWidgetID }}</div>
<div>response: {{ checkboxResponse }}</div>
<div data-testid="checkbox-verify">
{{ checkboxVerified ? "verified" : "" }}
</div>
</div>
</div>
</div>
</Layout>
</template>
app.js
import "./bootstrap";
import "../css/app.css";
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";
import { createHead } from "@unhead/vue";
import { VueRecaptchaPlugin } from "vue-recaptcha";
const appName = import.meta.env.VITE_APP_NAME || "Laravel";
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob("./Pages/**/*.vue")
),
setup({ el, App, props, plugin }) {
const recaptchaSiteKey = props.initialPage.props.recaptcha_site_key;
return createApp({ render: () => h(App, props) })
.use(plugin)
.use(ZiggyVue)
.use(createHead())
.use(VueRecaptchaPlugin, {
v2SiteKey: recaptchaSiteKey,
})
.mount(el);
},
progress: {
color: "#0d6efd",
},
});
Please or to participate in this conversation.