Vue Turnstile
A Vue 3.3.x component wrapper for Cloudflare's Turnstile
Installation
NPM
npm install @gaviti/vue-turnstileYarn
yarn add @gaviti/vue-turnstileInstallation 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' |
| position | 'left' | 'right' |
Widget position (fixed to left or right) | No | undefined |
| 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 | String |
Allow to change the appearance | No | always |
Methods
| Method | Description |
|---|---|
render() |
Render the widget |
reset() |
Reset the widget |
remove() |
Remove the widget |
getToken() |
Generates a new token |
Events
| Name | Description |
|---|---|
@verified |
Returns the token |
@rendering |
Emitted on mounted (returns nothing) |
@rendered |
Emitted at the end of render (returns nothing) |
Slots
| Name | Description |
|---|---|
default |
Default slot |
License
MIT License
Copyright (c) 2024 Gaviti