@rozie-ui/captcha-vue

@rozie-ui/captcha-vue

Idiomatic vue Captcha — Cross-framework CAPTCHA / bot-protection widget wrapping Google reCAPTCHA v2, hCaptcha, and Cloudflare Turnstile. Compiled from one Rozie source. This package is generated; do not edit src/ by hand.

This package ships Captcha (the default export) alongside RecaptchaV3 (named export).

Install

npm i @rozie-ui/captcha-vue

Peer dependencies: vue.

Captcha

Usage

<script setup lang="ts">
import { ref } from 'vue';
import Captcha from '@rozie-ui/captcha-vue';

const token = ref('');
</script>

<template>
  <Captcha
    provider="recaptcha"
    sitekey="your-site-key"
    v-model:token="token"
    @verify="(e) => console.log('verified', e.token)"
  />
</template>

Props

Events

Imperative handle

This component exposes imperative methods (declared once in the Rozie source via $expose). Grab a handle with the native ref mechanism and call them directly:

<script setup>
import { ref } from 'vue';
const handle = ref();
</script>

<template>
  <Captcha ref="handle" />
</template>

RecaptchaV3

Usage

<script setup lang="ts">
import { ref } from 'vue';
import { RecaptchaV3 } from '@rozie-ui/captcha-vue';

const captcha = ref();
const submit = async () => {
  const token = await captcha.value.execute('signup'); // fresh token for THIS action
  await fetch('/signup', { method: 'POST', body: JSON.stringify({ token }) });
};
</script>

<template>
  <form @submit.prevent="submit">
    <!-- … fields … -->
    <RecaptchaV3 ref="captcha" sitekey="your-site-key" action="signup" />
    <button type="submit">Sign up</button>
  </form>
</template>

Props

Events

Imperative handle

This component exposes imperative methods (declared once in the Rozie source via $expose). Grab a handle with the native ref mechanism and call them directly:

<script setup>
import { ref } from 'vue';
const handle = ref();
// const token = await handle.value.execute('submit');
</script>

<template>
  <RecaptchaV3 ref="handle" sitekey="your-site-key" />
</template>