vue-turnstile


A Cloudflare Turnstile library for Vue 3

Installation

Add vue-turnstile to your Javascript project dependencies using Yarn:

``bash
yarn add vue-turnstile
`

Or NPM:

`bash
npm install vue-turnstile --save
`

Usage

`vue



`

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' \| 'flexible' \| '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 | '' |
| appearance | 'always' \| 'execute' \| 'interaction-only' | Appearance controls when the widget is visible - Docs | No | 'always' |
| render-on-mount | Boolean | Automatically render Turnstile widget after component mounts | No | true |
| language | String | Language to display - ISO 639-1 two-letter language code - Supported languages | No | auto |

Methods

| Method | Description |
| ---------- | ------------------ |
| reset() | Resets the widget |
| render() | Renders the widget |

Events

| Method | Params | Description |
| ------------------------ | ------- | ------------------------------------------------------------------------------------- |
| @error | code | Callback invoked when there is an error (e.g. network error or the challenge failed). |
| @unsupported | - | Callback invoked when a given client/browser is not supported by Turnstile. |
| @expired | - | Callback invoked when the token expires and does not reset the widget. |
| @before-interactive | - | Callback invoked before the challenge enters interactive mode. |
| @after-interactive` | - | callback invoked when challenge has left interactive mode. |

Author

Rui Gomes
https://ruigomes.me

License

The MIT License (MIT). Please see LICENSE file for more information.