npm package: @gaviti/vue-turnstile
Description: A Vue 3.3.x component wrapper for Cloudflare's Turnstile
Author: Gaviti R&D
Latest version: 1.1.4

# Vue Turnstile

A Vue 3.3.x component wrapper for [Cloudflare's Turnstile](https://developers.cloudflare.com/turnstile/)

## Installation

### NPM

```bash
npm install @gaviti/vue-turnstile
```

### Yarn

```bash
yarn add @gaviti/vue-turnstile
```

## Installation 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

```javascript
<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](https://developers.cloudflare.com/turnstile/get-started/)                                                                    | 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](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#appearance-modes)     | No       | `always`   |
| Language         | `String`                                      | Language to display - ISO 639-1 two-letter language code - [Supported languages](https://developers.cloudflare.com/turnstile/reference/supported-languages/) | No       | `auto`     |

## 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) 2024 Gaviti