@gaviti/vue-turnstile

A Vue 3.3.x component wrapper for Cloudflare's Turnstile
21,878 8
vue vue3 captcha cloudflare turnstile
Install
npm install @gaviti/vue-turnstile
Latest Version:1.1.4
Vue:3
Older releases:2
License:MIT
Last Updated:Apr 4, 2025
Links: GitHub  ·  npm
Maintainer: amit_feldman

Vue Turnstile

A Vue 3.3.x component wrapper for Cloudflare's Turnstile

Installation

NPM

npm install @gaviti/vue-turnstile

Yarn

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

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

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

Related Packages

vue-turnstile

Vue library for Cloudflare Turnstile CAPTCHA alternative

992,136 92
captcha cloudflare turnstile vue vue3 library
@getjoystick/vue-turnstile

Vue library for Cloudflare Turnstile CAPTCHA alternative

577 0
captcha cloudflare turnstile vue vue3 library
vue-cloudflare-turnstile

A Vue 3 component wrapper for Cloudflare Turnstile. User-friendly (re)CAPTCHA al...

4,645 4
captcha cloudflare turnstile vue vue3 bot-protection component recaptcha security typescript
@delaneydev/laravel-turnstile-vue

A production-ready, SSR-safe Cloudflare Turnstile component for Vue 3.

1,937 9
captcha cloudflare turnstile vue vue3 inertia laravel nuxt ssr typescript
@nuxtjs/turnstile

Cloudflare Turnstile integration for Nuxt

1,052,067 296
captcha cloudflare module nuxt nuxt-module recaptcha

Version History

Version Released License
1.1.4 MIT
1.1.3 MIT
1.1.2 MIT
1.1.1 MIT
1.1.0 MIT