AI Captcha Vue Component

A Vue 3.0 component for integrating AI CAPTCHA verification into your applications. This component provides both standard widget and programmatic integration options with a clean, modern interface.

Installation

npm install @aicaptcha/js-loader
npm install @aicaptcha/vue-aicaptcha

Usage

Global Registration

import { createApp } from 'vue'
import AiCaptchaVue from '@aicaptcha/vue-aicaptcha'
import App from './App.vue'

const app = createApp(App)
app.use(AiCaptchaVue)
app.mount('#app')

On-demand Import

import { AiCaptcha } from '@aicaptcha/vue-aicaptcha'

export default {
  components: {
    AiCaptcha
  }
}

Components

AI Captcha

Supporting multiple verification methods and callback functions.

Basic Usage

<template>
  <AiCaptcha 
    sitekey="your_sitekey_here"
    id="captcha-container"
    :callback="onVerifySuccess"
    :errorCallback="onVerifyError"
  />
</template>

<script setup>
const onVerifySuccess = (token) => {
  console.log('Verification successful:', token)
}

const onVerifyError = (error) => {
  console.log('Verification failed:', error)
}
</script>

Invisible Captcha

<template>
  <AiCaptcha 
    ref="captchaRef"
    sitekey="your_sitekey_here"
    id="invisible-captcha"
    size="invisible"
    :callback="onVerifySuccess"
    :errorCallback="onVerifyError"
  />
  <button @click="showCaptcha">Show Captcha</button>
</template>

<script setup>
import { ref } from 'vue'

const captchaRef = ref()

const showCaptcha = () => {
  captchaRef.value.execute()
}
</script>

Props

| Property | Type | Required | Default | Description | |----------|------|----------|---------|-------------| | sitekey | string | Yes | - | Site key for captcha | | id | string | No | - | Container element ID | | size | string | No | normal | Captcha size (normal/invisible) | | theme | string | No | light | Theme (light/dark) | | hl | string | No | - | Language setting | | callback | function | No | - | Success callback | | errorCallback | function | No | - | Error callback | | expiredCallback | function | No | - | Expired callback | | chalexpiredCallback | function | No | - | Challenge expired callback | | closeCallback | function | No | - | Close callback | | openCallback | function | No | - | Open callback |

Methods

Methods available after getting component instance via ref:

| Method | Description | Return Type | |--------|-------------|-------------| | reset() | Reset captcha | void | | execute() | Execute captcha (invisible mode) | void | | getResponse() | Get verification result | string |

Complete Example

<template>
  <div>
    <!-- Normal Captcha -->
    <AiCaptcha 
      ref="normalCaptcha"
      sitekey="your_sitekey_here"
      id="normal-captcha"
      :callback="handleSuccess"
      :errorCallback="handleError"
      :expiredCallback="handleExpired"
    />
    
    <!-- Invisible Captcha -->
    <AiCaptcha 
      ref="invisibleCaptcha"
      sitekey="your_sitekey_here"
      id="invisible-captcha"
      size="invisible"
      :callback="handleSuccess"
      :errorCallback="handleError"
    />
    
    <div>
      <button @click="resetNormal">Reset Normal Captcha</button>
      <button @click="showInvisible">Show Invisible Captcha</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { AiCaptcha } from 'your-ai-captcha-vue'

const normalCaptcha = ref()
const invisibleCaptcha = ref()

const handleSuccess = (token) => {
  console.log('Verification successful, token:', token)
}

const handleError = (error) => {
  console.log('Verification error:', error)
}

const handleExpired = () => {
  console.log('Verification expired')
}

const resetNormal = () => {
  normalCaptcha.value.reset()
}

const showInvisible = () => {
  invisibleCaptcha.value.execute()
}
</script>