@captchafox/vue

Installation

Install the library using your prefered package manager

npm install @captchafox/vue

yarn add @captchafox/vue

pnpm add @captchafox/vue

bun add @captchafox/vue

Usage

<script setup lang="ts">
import { CaptchaFox } from '@captchafox/vue';
</script>

<template>
  <CaptchaFox sitekey="sk_11111111000000001111111100000000" />
</template>

(Optional) Register it for the whole app (e.g. main.ts)

import { CaptchaFox } from '@captchafox/vue';
import App from './App.vue';

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

Props

| Prop | Type | Description | Required | | -------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------ | | sitekey | string | The sitekey for the widget. | ✅ | | lang | string | The language the widget should display. Defaults to automatically detecting it. | | | mode | inline\|popup\|hidden | The mode the widget should be displayed in. | | | theme | light | dark | ThemeDefinition | The theme of the widget. Defaults to light. | | | nonce | string | Randomly generated nonce. | | | i18n | object | Custom i18n configuration. | | | onVerify | function | Called with the response token after successful verification. | | | onFail | function | Called after unsuccessful verification. | | | onError | function | Called when an error occured. | | | onExpire | function | Called when the challenge expires. | | | onClose | function | Called when the challenge was closed. | |

Using the verification callback

<script setup lang="ts">
import { CaptchaFox, CAPTCHA_RESPONSE_KEY } from '@captchafox/vue';

const handleVerify = (token: string) => {
  // do something with the token here (e.g. submit the form)
  const formData = {
    // your form data
    [CAPTCHA_RESPONSE_KEY]: token
  };
};
</script>

<template>
  <CaptchaFox sitekey="sk_11111111000000001111111100000000" @verify="handleVerify" />
</template>

Using v-model

<script setup lang="ts">
import { CaptchaFox, CAPTCHA_RESPONSE_KEY } from '@captchafox/vue';

// contains response token after successful verification
const token = ref<string>();
</script>

<template>
  <CaptchaFox sitekey="sk_11111111000000001111111100000000" v-model="token" />
  <pre>{{ token }}</pre>
</template>

Interacting with the instance

<script setup lang="ts">
import { CAPTCHA_RESPONSE_KEY, CaptchaFox, CaptchaFoxInstance } from '@captchafox/vue';
import { ref } from 'vue';

const captchafox = ref<CaptchaFoxInstance | null>(null);

const triggerAction = async () => {
  // execute the captcha
  try {
    const token = await captchafox.value?.execute();
  } catch {
    // unsuccessful verification
  }
};
</script>

<template>
  <CaptchaFox ref="captchafox" sitekey="sk_11111111000000001111111100000000" />
  <button @click="triggerAction">Action</button>
</template>

You can find more detailed examples in the GitHub repository.