A Vue 2.7.x component wrapper for Cloudflare's Turnstile
npm install @gaviti/vue-turnstileyarn add @gaviti/vue-turnstileFor Vue 3.3.x support, you should install a version of this package greater than or equal to 1.0.0. For the code corresponding to version 1.0.0 (Vue 3) and above, please refer to the "next" branch.
<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>| 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 |
| Method | Description |
|---|---|
render() |
Render the widget |
reset() |
Reset the widget |
remove() |
Remove the widget |
execute() |
Generate a new token |
| 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). |
| Name | Description |
|---|---|
default |
Default slot |
MIT License
Copyright (c) 2023 Gaviti
