Non-Printable Material

    This package has been deprecated

    Author message:

    This package has moved to @nuxtjs/turnstile.

    nuxt-turnstile
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    Nuxt Turnstile

    npm version npm downloads Github Actions Codecov

    Cloudflare Turnstile integration for Nuxt 3

    Features

    • 💪 smart verification with minimal user interaction
    • 🕵️‍♀️ privacy-focused approach
    • server validation helper for your nitro endpoints
    • ⚡️ lightweight - script only loaded when required

    Installation

    1. First, follow these steps to obtain a free sitekey and secret key from Cloudflare.

    2. Install and add nuxt-turnstile to your nuxt.config.

      # Whichever matches your package manager
      pnpm add -D nuxt-turnstile
      npm install -D nuxt-turnstile
      yarn add -D nuxt-turnstile
      export default defineNuxtConfig({
        modules: ['nuxt-turnstile'],
        runtimeConfig: {
          turnstile: {
            secretKey: process.env.NUXT_TURNSTILE_SECRET_KEY || '',
          },
        },
        turnstile: {
          siteKey: '<your-site-key>',
        },
      })

      Tip: At runtime you can override site and secret keys with the NUXT_TURNSTILE_SECRET_KEY and NUXT_PUBLIC_TURNSTILE_SITE_KEY environment variables.

    Usage

    To use Turnstile, add the auto-imported Vue component in whatever component needs it:

    <template>
      <div>
        <form @submit.prevent="onSubmit">
          <Turnstile v-model="token" />
          <input type="submit" />
        </form>
      </div>
    </template>

    <Turnstile> can take a number of options via the options argument. See all options. It renders the Turnstile <iframe> within a <div> wrapper by default, but you can configure this by setting the element prop.

    When in the page, it will automatically load the Turnstile script and validate your user. Each validation lasts for 300s, and nuxt-turnstile will automatically revalidate this token after 250s.

    You can access the validation token by setting a v-model on the component. Then, send the token along with your form responses, either explicitly or automatically (Cloudflare adds a hidden form element with the name cf-turnstile-response to your form). To validate the token on server-side, you can use the auto-imported verifyTurnstileToken utility in your Nitro server routes.

    💻 Development

    • Clone this repository
    • Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
    • Install dependencies using pnpm install
    • Stub module with pnpm dev:prepare
    • Run pnpm dev to start playground in development mode

    Credits

    License

    Made with ❤️

    Published under the MIT License.

    Install

    npm i nuxt-turnstile

    DownloadsWeekly Downloads

    139

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    19.1 kB

    Total Files

    17

    Last publish

    Collaborators

    • danielroe