@vycecap/vue

Vue component for Vyce Captcha - Privacy-first invisible CAPTCHA using Proof-of-Work and AI.

Installation

npm install @vycecap/vue

Quick Start

1. Load the Vyce Script

Add the Vyce script to your HTML:

<script src="https://vyce.cc/vyce.js" async defer></script>

Or in Vue:

import { onMounted, onUnmounted } from 'vue';

// In your component
onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://vyce.cc/vyce.js';
  script.async = true;
  document.head.appendChild(script);
});

2. Use the Component

<script setup>
import { ref } from 'vue';
import { VyceCaptcha } from '@vycecap/vue';

const token = ref<string | null>(null);

const handleSubmit = async () => {
  if (!token.value) {
    alert('Please complete the captcha');
    return;
  }
  
  // Submit form with token
  await fetch('/api/submit', {
    method: 'POST',
    body: JSON.stringify({ vyce_token: token.value }),
  });
};
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input name="email" type="email" required />
    
    <VyceCaptcha
      sitekey="your-site-key"
      mode="checkbox"
      @verify="token = $event"
      @error="(err) => console.error('Captcha error:', err)"
    />
    
    <button type="submit" :disabled="!token">
      Submit
    </button>
  </form>
</template>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | sitekey | string | required | Your site key from Vyce dashboard | | mode | 'checkbox' \| 'auto' \| 'invisible' | 'checkbox' | Widget display mode | | lang | string | 'en' | Language code | | class | string | - | Additional CSS classes | | style | Record<string, string> | - | Inline styles |

Events

| Event | Payload | Description | |-------|---------|-------------| | verify | token: string | Emitted on successful verification | | error | error: string | Emitted on verification failure | | expire | - | Emitted when token expires |

Expose Methods

Use a template ref to control the widget:

<script setup lang="ts">
import { ref } from 'vue';
import type { VyceCaptchaExpose } from '@vycecap/vue';

const captchaRef = ref<VyceCaptchaExpose | null>(null);

const handleReset = () => {
  captchaRef.value?.reset();
};

const handleInvisibleSubmit = async () => {
  const token = await captchaRef.value?.execute();
  // Submit with token
};
</script>

<template>
  <VyceCaptcha
    ref="captchaRef"
    sitekey="your-site-key"
    mode="invisible"
    @verify="(token) => console.log('Verified:', token)"
  />
  <button @click="handleReset">Reset</button>
  <button @click="handleInvisibleSubmit">Submit</button>
</template>

| Method | Returns | Description | |--------|---------|-------------| | getToken() | string \| null | Get current verification token | | reset() | void | Reset widget to initial state | | execute() | Promise<string> | Manually trigger verification (invisible mode) |

Modes

Checkbox Mode (Default)

User clicks "I am human" checkbox to verify.

<VyceCaptcha sitekey="..." mode="checkbox" @verify="token = $event" />

Auto Mode

Automatically verifies when the widget loads.

<VyceCaptcha sitekey="..." mode="auto" @verify="token = $event" />

Invisible Mode

Hidden widget, trigger verification programmatically.

<VyceCaptcha ref="captchaRef" sitekey="..." mode="invisible" />
<!-- Later: await captchaRef.execute() -->

Nuxt 3 Example

<!-- pages/contact.vue -->
<script setup lang="ts">
import { ref, useHead } from '#imports';
import { VyceCaptcha } from '@vycecap/vue';

useHead({
  script: [{ src: 'https://vyce.cc/vyce.js', async: true }],
});

const token = ref<string | null>(null);
</script>

<template>
  <form>
    <VyceCaptcha
      :sitekey="config.public.vyceSitekey"
      @verify="token = $event"
    />
  </form>
</template>

Supported Languages

en, de, es, fr, pt, it, nl, pl, ru, zh, ja

License

MIT © Vyce Captcha