search

ruigomeseu / vue-turnstile

A Cloudflare Turnstile library for Vue 3
MIT License
63 stars 9 forks source link
cloudflare turnstile vue vuejs

readme

vue-turnstile

npm version

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' \| '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.