@cloudmpower/hcaptcha-cmp

hcaptcha-module

hCaptcha integration with Nuxt.js

Usage

1. Install

npm i hcaptcha-cmp

or using yarn

yarn add hcaptcha-cmp

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

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

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