Skip to content

getjoystick/vue-turnstile

 
 

Repository files navigation

vue-turnstile

Latest Stable Version

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.

About

A Cloudflare Turnstile library for Vue 3

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Vue 87.0%
  • TypeScript 13.0%