Vue SDK

Vue 3 wrapper for the gkCAPTCHA Web Component

Installation

terminal

npm install @gkcaptcha/vue

Quickstart

Register globally (optional) or import directly in your component: / سجّل عالميًا (اختياري) أو استورد مباشرةً في المكوّن:

main.ts

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

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

composable.ts

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

Same props as @gkcaptcha/react — see React SDK for the full prop table. / نفس خصائص @gkcaptcha/react — انظر توثيق React SDK.

TypeScript Types

All props are typed via @gkcaptcha/types