Package Exports

vue3-smart-captcha
vue3-smart-captcha/dist/index.cjs
vue3-smart-captcha/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue3-smart-captcha) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Yandex SmartCaptcha for Vue3 projects

Adds Yandex SmartCaptcha component into your Vue3 application

You need to create Captcha and get keys. You need client site key in order to activate captcha component and it is the only required property

NOTE: this package does NOT provides verification of response - you still need to implement it

Installation

Install it using npm

npm install vue3-smart-captcha

# Or using pnpm
pnpm add vue3-smart-captcha

Usage

No need to add widget script in the head section of your site

As plugin

// main.js
import { createApp } from 'vue'
import { SmartCaptchaPlugin } from 'vue3-smart-captcha'

const app = createApp({})

app.use(SmartCaptchaPlugin)

As component

<template>
    <SmartCaptcha :sitekey="sitekey" />
</template>

<script setup>
import { SmartCaptcha } from 'vue3-smart-captcha'

const sitekey = 'client_site_key' // import.meta.env.VITE_YANDEX_SMART_CAPTCHA_KEY
</script>

You may add style="height: 100px" in order to prevent layout jump

<template>
    <SmartCaptcha style="height: 100px" :sitekey="sitekey" />
</template>

Options

Only sitekey is required

Property	Default	Type
sitekey	-	`string`
loadWidget	`true`	`boolean`
callback	`undefined`	`(token: string) => void`
hl	`window.navigator.language`	`'ru', 'en', 'be', 'kk', 'tt', 'uk', 'uz', 'tr'`
test	`false`	`boolean`
webview	`false`	`boolean`
invisible	`false`	`boolean`
shieldPosition	`center-right`	`'top-left', 'center-left', 'bottom-left', 'top-right', 'center-right', 'bottom-right'`
hideShield	`false`	`boolean`
on-success	`undefined`	`(token: string) => void`
on-network-error	`undefined`	`() => void`
on-challenge-visible	`undefined`	`() => void`
on-challenge-hidden	`undefined`	`() => void`
on-token-expired	`undefined`	`() => void`

Basically it gets every parameter of window.smartCaptcha object plus 5 callbacks for every subscription events named as on + event name in camelCase ('success' => 'onSuccess', 'network-error' => 'onNetworkError', etc)

You may add script tag <script src="https://smartcaptcha.yandexcloud.net/captcha.js?render=onload" defer></script> yourself or using Nuxt config. This way you don't need to render widget script itself. Just set :load-widget="false" to disable script loading

License

Open-source under MIT license

Testing

We are using Vitest

Help wanted to cover properties were passed to window.smartCaptcha object

pnpm test

vue3-smart-captcha