🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

@captchafox/vue

Package Overview
Dependencies
Maintainers
0
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@captchafox/vue

[![NPM version](https://img.shields.io/npm/v/@captchafox/vue.svg)](https://www.npmjs.com/package/@captchafox/vue)

1.4.0
latest
Source
npm
Version published
Weekly downloads
130
-35.96%
Maintainers
0
Weekly downloads
 
Created
Source

@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

PropTypeDescriptionRequired
sitekeystringThe sitekey for the widget.
langstringThe language the widget should display. Defaults to automatically detecting it.
modeinline|popup|hiddenThe mode the widget should be displayed in.
themelight | dark | ThemeDefinitionThe theme of the widget. Defaults to light.
noncestringRandomly generated nonce.
i18nobjectCustom i18n configuration.
onVerifyfunctionCalled with the response token after successful verification.
onFailfunctionCalled after unsuccessful verification.
onErrorfunctionCalled when an error occured.
onExpirefunctionCalled when the challenge expires.
onClosefunctionCalled 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.

Keywords

vue

FAQs

Package last updated on 17 Feb 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts