@gkcaptcha/vue

Vue 3 wrapper for the gkCAPTCHA Web Component.

Requirements

• Vue >= 3.3
• Node.js >= 18

Installation

npm install @gkcaptcha/vue

Quickstart

// main.ts
import { createApp } from 'vue'
import { GkCaptcha } from '@gkcaptcha/vue'
import App from './App.vue'

const app = createApp(App)
app.component('GkCaptcha', GkCaptcha)
app.mount('#app')

<!-- LoginForm.vue -->
<template>
  <form @submit.prevent="handleSubmit">
    <GkCaptcha
      site-key="pk_live_your_site_key"
      @verify="onCaptchaVerify"
    />
    <button type="submit">Login</button>
  </form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { GkCaptcha } from '@gkcaptcha/vue'

const captchaToken = ref('')

function onCaptchaVerify(token: string) {
  captchaToken.value = token
}

async function handleSubmit() {
  await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({ captchaToken: captchaToken.value }),
  })
}
</script>

Composable

import { GkCaptcha, useGkCaptcha } from '@gkcaptcha/vue'

const { captchaRef, execute, reset } = useGkCaptcha()
// <GkCaptcha :ref="captchaRef" site-key="..." @verify="..." />

Events

| Event | Payload | Description | |-------|---------|-------------| | @verify | token: string | CAPTCHA passed | | @error | error: string | Widget error | | @expire | — | Token expired |

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | siteKey | string (required) | -- | Your gkCAPTCHA site key | | mode | 'checkbox' \| 'overlay' \| 'invisible' | 'checkbox' | Widget mode | | theme | 'light' \| 'dark' \| 'auto' | 'auto' | Color theme | | size | 'normal' \| 'compact' | 'normal' | Widget size | | lang | string | -- | Language code | | baseUrl | string | (production CDN) | Widget script URL base | | challengeUrl | string | -- | Override challenge endpoint | | verifyUrl | string | -- | Override verify endpoint | | disabled | boolean | false | Disable interaction | | trigger | '' \| 'onsubmit' \| 'onfocus' \| 'onload' \| 'managed' | -- | Challenge trigger | | autoExecute | boolean | false | Auto-start invisible mode | | disableRefetchOnExpire | boolean | false | Don't refetch on expire | | refreshBuffer | number | -- | Buffer seconds before expiry refetch |