hcaptcha-module

hCaptcha integration with Nuxt.js

Usage

1. Install

npm i hcaptcha-nuxt

or using yarn

yarn add hcaptcha-nuxt

2. Add hcaptcha-nuxt module in nuxt.config.js

export default {
    modules: [
        "hcaptcha-nuxt"
    ],
}

3. Specify your site key in nuxt.config.js

export default {
    hcaptcha: {
        siteKey: process.env.HCAPTCHA_SITE_KEY || ''
    }
}

4. Add <hcaptcha> component in your-component.vue

<template>
    <div>
        <hcaptcha />
    </div>
</template>

5. You are ready to go. get the response and send it to the server then validate it

In your-component.vue

<script>
export default {
    methods: {
        onSubmit() {
            const hcaptcha_response = this.$hcaptcha.getResponse()
        }
    }
}
</script>

Local Development

For local development, as modern browsers have strict CORS CORB,
hCaptcha will not work on file://somewhere either localhost

add 127.0.0.1 your.domain.com to the hosts to prevent this.

• /etc/hosts on Linux,
• /private/hosts on OSX,
• %SystemRoot%/System32/drivers/etc/hosts on Windows.

License

MIT