Nuxt hCaptcha
🚧 Note: This project is currently under development and not yet production ready.
Nuxt module that allows to protect your website from bots. Heavily inspired by Nuxt Turnstile.
Quick Setup
- Add
nuxt-hcaptcha-module
dependency to your project
pnpm add -D nuxt-hcaptcha-module
yarn add --dev nuxt-hcaptcha-module
npm install --save-dev nuxt-hcaptcha-module
- Add
nuxt-hcaptcha-module
to the modules
section of nuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-hcaptcha-module'
]
})
- Set
siteKey
and secretKey
generated in hCaptcha dashboard
export default defineNuxtConfig({
modules: ["nuxt-hcaptcha-module"],
hcaptcha: {
siteKey: 'YOUR_SITE_KEY',
secretKey: 'YOUR_SECRET_KEY'
}
});
You can also use environment variables:
HCAPTCHA_SITE_KEY=YOUR_SITE_KEY
HCAPTCHA_SECRET_KEY=YOUR_SECRET_KEY
- Use
NuxtHCaptcha
component in your application
<template>
<form @submit.prevent="sendForm">
<!-- put your form fields here -->
<NuxtHCaptcha v-model="form.token" />
<button>submit</button>
</form>
</template>
<script setup>
const form = ref({
token: ''
})
async function sendForm () {
await $fetch('/api/your-api-endpoint', {
method: 'POST',
body: form.value
})
}
</script>
- Use
verifyHCaptchaToken
to validate hCaptcha token (only when you use server routes)
export default defineEventHandler(async (event) => {
const body = await readBody(event)
const captchaResponse = await verifyHCaptchaToken(body.token)
if (!captchaResponse.success) {
return createError({
statusCode: 401
})
}
return ({ success: true })
})
Development
npm install
npm run dev:prepare
npm run dev
npm run dev:build
npm run lint
npm run test
npm run test:watch
npm run release