vue-turnstile
A Cloudflare Turnstile library for Vue 3
Installation
Add vue-turnstile to your Javascript project dependencies using Yarn:
yarn add vue-turnstileOr NPM:
npm install vue-turnstile --saveUsage
<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.