Vue Turnstile

A Vue 2.7.x component wrapper for Cloudflare's Turnstile

Installation

NPM

npm install @gaviti/vue-turnstile

Yarn

yarn add @gaviti/vue-turnstile

Installation for Vue 3.3.x

For Vue 3.3.x support, you should install a version of this package greater than or equal to 1.0.0. For the code corresponding to version 1.0.0 (Vue 3) and above, please refer to the "next" branch.

Usage

<template>
  <div>
    <vue-turnstile @verified="token = $event" />
    <div>Token: {{ token }}</div>
  </div>
</template>

<script>
import VueTurnstile from '@gaviti/vue-turnstile';

export default {
  components: {
    VueTurnstile
  },
  data() {
    return {
      token: null,
    };
  },
};
</script>

Customization options

Prop	Type	Description	Required	Default
site-key	String	Your Turnstile sitekey - Docs	Yes	N/A
theme	'light' | 'dark' | 'auto'	Widget theme	No	'auto'
size	'normal' | 'compact'	Widget size	No	'normal'
auto-reset	Boolean	Allow to refresh the token after some time (in milliseconds)	No	false
reset-timeout	Number	Refresh the token after some time (in milliseconds) * requires auto-reset to be true	No	295000
recaptcha-compat	Boolean	Adds recaptcha compatibility layer	No	false
explicit-render	Boolean	Renders the widget explicitly	No	false
appearance	'always' | 'execute' | 'interaction-only'	Appearance controls when the widget is visible - Docs	No	always
Language	String	Language to display - ISO 639-1 two-letter language code - Supported languages	No	auto

Methods

Method	Description
render()	Render the widget
reset()	Reset the widget
remove()	Remove the widget
execute()	Generate a new token

Events

Name	Params	Description
@verified		Returns the token
@rendering		Emitted on mounted (returns nothing)
@rendered		Emitted at the end of render (returns nothing)
@error	code	Callback invoked when there is an error (e.g. network error or the challenge failed).

Slots

Name	Description
default	Default slot

License

MIT License

Copyright (c) 2023 Gaviti