astrian/cfturnstile-vue3

A Vue 3 component for showing the Cloudflare Turnstile widget on your project.

Cloudflare Turnstile Widget Component for Vue 3

A Vue 3 component for showing the Cloudflare Turnstile widget on your project.

What is Cloudflare Turnstile?

Cloudflare Turnstile is a CAPTCHA alternative from Cloudflare. It uses PAT protocol to verify the user’s devices, preventing bots and malicious users from accessing your site and ensuring your and your visitors’ privacy is protected.

Introduction for Cloudflare Turnstile

Showcases

Telegram Watchdog

Telegram Watchdog is a Telegram bot used for anti-abuse from Telegram group chats.

Get into Telegram Watchdog community to give a try

Installation & Usage

yarn add cfturnstile-vue3
# or
npm install cfturnstile-vue3

<template>
  <div id="app">
    <cfturnstile
      :sitekey="sitekey"
      @verify="verify"
    />
  </div>
</template>
<script>
import { defineComponent } from 'vue'
import Turnstile from 'cfturnstile-vue3'

export default defineComponent({
  name: 'App',
  components: {
    Turnstile
  },
  data() {
    return {
      sitekey: 'YOUR_SITE_KEY'
    }
  },
  methods: {
    verify(token) {
      console.log(token)
    }
  }
})
</script>

cfturnstile-vue3's Issues

Option to re-run turnstile?

Hi, is there any option or way to make the component re-run?

I am in the following scenario:

• User submits a form, then decides to send another one (same component)
• Even by updating the key of the Turnstile component, the challenge doesn't re-run so I don't get a new token

Getting a new token for the second request is needed because a token can only be used for 1 request, then it becomes invalid.

Is there any way I could achieve this?

cfturnstile component does not exist

In your README you describe how to use the cfturnstile.

<cfturnstile
      :sitekey="sitekey"
      @verify="verify"
    />

However, this compoment is not what you are importing. Did you mean Turnstile?