Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

devhoussam123's avatar

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",
    },
});
0 likes
0 replies

Please or to participate in this conversation.