@getjoystick/vue-turnstile NPM

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.

cloudflare turnstile vue captcha vue3 library

vue

@everything-registry/sub-chunk-359

1.1.0

9 months ago

1.0.0-alpha.1

9 months ago