@captchafox/vue
TypeScript icon, indicating that this package has built-in type declarations

1.4.0 • Public • Published

@captchafox/vue

NPM version

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.

Readme

Keywords

Package Sidebar

Install

npm i @captchafox/vue

Weekly Downloads

120

Version

1.4.0

License

MIT

Unpacked Size

15.7 kB

Total Files

6

Last publish

Collaborators

  • tgrassl
  • captchafox-npm