Vue Turnstile

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

Installation

NPM

npm install @gaviti/vue-turnstile

Yarn

yarn add @gaviti/vue-turnstile

Installation for Vue 2.7.x

For Vue 2.7.x support, you should install a version of this package lower than 1.0.0. Please refer to the "master" branch for the related code.

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
`getToken()`	Generates 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