1.1.0 • Published 4 months ago
@captchafox/vue v1.1.0
@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. | |
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.