vue-turnstile

A Cloudflare Turnstile library for Vue 3

Installation

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

yarn add vue-turnstile

Or NPM:

npm install vue-turnstile --save

Usage

<script lang="ts">
import VueTurnstile from 'vue-turnstile';

export default {
  components: { VueTurnstile },

  data() {
    return {
      token: '',
    };
  },
};
</script>

<template>
  <div>
    <vue-turnstile site-key="1x00000000000000000000AA" v-model="token" />
    <div>Token: {{ token }}</div>
  </div>
</template>

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' \| '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 | '' | | render-on-mount | Boolean | Automatically render Turnstile widget after component mounts | No | true | | remove-before-unmount | Boolean | Automatically remove the Turnstile widget in beforeUnmount | No | true |

Methods

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

Author

Original author of the library is: Rui Gomes
https://ruigomes.me

Fork is maintained and published by: Joystick https://getjoystick.com

License

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