Cloudflare Turnstile integration for Nuxt
npm install @nuxtjs/turnstile[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions][github-actions-src]][github-actions-href]
[![Codecov][codecov-src]][codecov-href]
> Cloudflare Turnstile integration for Nuxt 3
- ✨ Changelog
- ▶️ Online playground
- 💪 smart verification with minimal user interaction
- 🕵️♀️ privacy-focused approach
- ✨ server validation helper for your nitro endpoints
- ⚡️ lightweight - script only loaded when required
1. First, follow these steps to obtain a free sitekey and secret key from Cloudflare.
1. Install @nuxt/scripts as a dependency - see docs for more info if you're interested.
1. Install and add @nuxtjs/turnstile to your nuxt.config.
``bash`
npx nuxi@latest module add turnstile
`js
export default defineNuxtConfig({
modules: ['@nuxtjs/turnstile'],
turnstile: {
siteKey: '
},
runtimeConfig: {
turnstile: {
// This can be overridden at runtime via the NUXT_TURNSTILE_SECRET_KEY
// environment variable.
secretKey: '',
},
},
})
`
Alternatively, you may set turnstile.secretKeyPath to a path to a file containing the secret key. This will be read at build-time and will override any other explicit secretKey you have set.
Tip: At runtime you can override site and secret keys with the NUXT_TURNSTILE_SECRET_KEY and NUXT_PUBLIC_TURNSTILE_SITE_KEY environment variables.
To use Turnstile, you will likely want to:
- Use the component in your app (for example to build a contact form)
- Verify the token on your server, when you are processing an API request or a form submission (for example, before sending the email out)
To use Turnstile, add the auto-imported Vue component in whatever component needs it:
`html`
can take a number of options via the options argument. See all options. It renders the Turnstile