@getjoystick/vue-turnstile

vue-turnstile

A Cloudflare Turnstile library for Vue 3

Installation

Add vue-turnstile to your Javascript project dependencies using Yarn:

yarn add vue-turnstile

Or NPM:

npm install vue-turnstile --save

Usage

<script lang="ts">
import VueTurnstile from 'vue-turnstile';

export default {
  components: { VueTurnstile },

  data() {
    return {
      token: '',
    };
  },
};
</script>

<template>
  <div>
    <vue-turnstile site-key="1x00000000000000000000AA" v-model="token" />
    <div>Token: {{ token }}</div>
  </div>
</template>

Customization options

Prop	Type	Description	Required	Default
site-key	String	Your Turnstile sitekey - Docs	Yes	N/A
v-model	String	Binding that contains the token returned by the Turnstile widget	Yes	N/A
reset-interval	Number	Get a fresh token after reset-interval milliseconds - Turnstile tokens only last for 5 minutes	No	295000
size	'normal' | 'compact'	Widget size	No	'normal'
theme	'light' | 'dark' | 'auto'	Widget theme - auto respects the user's browser preference	No	'auto'
action	String	A customer value that can be used to differentiate widgets under the same sitekey in analytics and which is returned upon validation.	No	''
render-on-mount	Boolean	Automatically render Turnstile widget after component mounts	No	true
remove-before-unmount	Boolean	Automatically remove the Turnstile widget in beforeUnmount	No	true

Methods

Method	Description
reset()	Resets the widget
render()	Renders the widget
remove()	Removes the widget

Author

Original author of the library is: Rui Gomes
https://ruigomes.me

Fork is maintained and published by: Joystick https://getjoystick.com

License

The MIT License (MIT). Please see LICENSE file for more information.