Load on local component instead of global

[rlidev]

Does anyone know how to load the library in a single page/component for example (contact page) instead of loading it globally from app.js ?

This is because it unnecessarily loads the library on pages that do not use Recaptcha and it is not very optimal.

[yooouuri]

https://github.com/AurityLab/vue-recaptcha-v3/blob/master/src/ReCaptchaVuePlugin.ts

You need to move the provide to a kind of init function https://github.com/AurityLab/vue-recaptcha-v3/blob/master/src/ReCaptchaVuePlugin.ts#L36-L41

[alanscordoba]

You can use the property autoHideBadge= true, for example:

createApp(App) .use(VueReCaptcha, { siteKey: <key>, loaderOptions: { useRecaptchaNet: true, autoHideBadge: true } }) .mount('#app')

[codeflorist]

autoHideBadge: true only hides the badge. the scripts are loaded nonetheless.

loading the script only on-demand is also relevant for GDPR-conform websites, since recaptchas should only be loaded on user consent.

here is a composable, that uses the recaptcha-v3 package (which is also used by vue-recaptcha-v3 under the hood). loading and token-generation is done in one function call and you can to it anywhere you want (e.g. in the submit-function of your form), without anything getting loaded globally.

import { load } from 'recaptcha-v3'

export const useGoogleRecaptcha = () => {
    const getRecaptchaToken = async (action: string) => {
        const recaptcha = await load('<site-key>', {
            autoHideBadge: true,
            useRecaptchaNet: true
        })
        const token = await recaptcha.execute(action)
        return token
    }

    return { getRecaptchaToken }
}

of course you need to install the package:

pnpm add -D recaptcha-v3