1.1.6 • Published 11 months ago
@josh256/vue-turnstile v1.1.6
Owner
https://github.com/gaviti/vue-turnstile
I just forked it to add action prop to the component.
Vue Turnstile
A Vue 3.3.x component wrapper for Cloudflare's Turnstile
Installation
NPM
npm install @josh256/vue-turnstileYarn
yarn add @josh256/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' |
| 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 | 'always' \| 'execute' \| 'interaction-only' | Appearance controls when the widget is visible - Docs | No | always |
| Language | String | Language to display - ISO 639-1 two-letter language code - Supported languages | 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 - Docs | No |
Methods
| Method | Description |
|---|---|
render() | Render the widget |
reset() | Reset the widget |
remove() | Remove the widget |
getToken() | Generates a new token |
Events
| Name | Params | Description |
|---|---|---|
@verified | Returns the token | |
@rendering | Emitted on mounted (returns nothing) | |
@rendered | Emitted at the end of render (returns nothing) | |
@error | code | Callback invoked when there is an error (e.g. network error or the challenge failed). |
Slots
| Name | Description |
|---|---|
default | Default slot |
License
MIT License
Copyright (c) 2025 josh256