v1.140.0

# Cloudflare Turnstile

Component name: <v-turnstile>

Cloudflare Turnstile CAPTCHA-komponent. Loader Turnstile-scriptet dynamisk, så det kun hentes på sider hvor komponenten bruges.

Turnstile opretter automatisk et skjult input-felt (name="cf-turnstile-response") med tokenet i den nærmeste <form>, så tokenet sendes med ved form submit uden yderligere opsætning.

# Examples

# Basic

# Inside a form

# API

# Props

Documentation table
Name Type Description Default
sitekey String Cloudflare Turnstile site key (required) -
theme String Widget theme: light, dark or auto light
size String Widget size: normal, compact or flexible flexible
language String Widget language (ISO 639-1) da

# Events

Documentation table
Name Payload Description
verify token (String) Emitted when the CAPTCHA is solved successfully
error error Emitted when the CAPTCHA fails to load or verify
expired - Emitted when the CAPTCHA token expires

# Methods

Methods can be called via $refs:

  • reset() — Resets the Turnstile widget for re-verification
  • getResponse() — Returns the current token, or null if not yet verified

# Migration

Anbefaling

Tidligere implementeringer med statisk markup bør udskiftes med <v-turnstile> komponenten:

Tidligere (anbefales ikke):

<!-- Script i <head> eller som global VuePress config -->
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

<!-- Inde i formen -->
<section class="cloudflare-turnstile-3f-style">
  <div class="cf-turnstile" data-theme="light" data-sitekey="YOUR_SITE_KEY" data-size="flexible" data-language="da"></div>
</section>
1
2
3
4
5
6
7

Nu:

<v-turnstile sitekey="YOUR_SITE_KEY"></v-turnstile>
1

Fordele ved komponenten:

  • Scriptet loades kun på sider hvor Turnstile bruges
  • Ingen global script-tag nødvendig i <head>
  • Virker inde i Vue-komponenter som <v-form> (statisk <script> gør ikke)

← Article →