Vue Friendly Captcha

Wrapper component library for Friendly Challenge. Works with Vue 2 and 3.

Getting Started

1. Install the package

Vue 2.x: npm install --save @somushq/vue-friendly-captcha
Vue 3.x: npm install --save @somushq/vue3-friendly-captcha

2. Use it in your Vue app

Vue 2.x:

<template>
    <vue-friendly-captcha sitekey="your-site-key" />
</template>

<script>
    import VueFriendlyCaptcha from '@somushq/vue-friendly-captcha';

    export default {
        components: {
            VueFriendlyCaptcha,
        },
    };
</script>

Vue 3.x:

<template>
    <vue-friendly-captcha sitekey="your-site-key" />
</template>

<script setup>
    import VueFriendlyCaptcha from '@somushq/vue3-friendly-captcha';
</script>

API

Props

Name	Type	Default value	Description
`sitekey`*	String	N/A	The site key to be used for Friendly Captcha.
`dark`	Boolean	`false`	Whether the widget should render in dark mode.
`startMode`	String	`'focus'`	Specifies when the widget should start solving the puzzle.
`language`	String	`'en'`	The language to be used for the widget.
`solutionFieldName`	String	`'frc-captcha-solution'`	The name of the field that will contain the solution.
`puzzleEndpoint`	String	`'https://api.friendlycaptcha.com/api/v1/puzzle'`	The endpoint to be used for the puzzle.

* – Required

Methods

Name	Params	Return type	Description
`init`	N/A	`void`	Initializes the Friendly Challenge widget.
`start`	N/A	`void`	Starts solving the captcha.
`reset`	N/A	`void`	Resets the captcha.
`destroy`	N/A	`void`	Destroys the captcha.
`isValid`	N/A	`boolean`	Returns whether the captcha has been validated.

Events

Name	Params	Description
`ready`	N/A	The Friendly Captcha widget is ready.
`started`	N/A	Solution has been initiated.
`done`	`string`	The captcha was solved. Will contain the solution as a parameter.
`error`	`string`	The captcha was not solved. Will contain the error as a parameter.

For Contributors

We publish separate modules for Vue 2 and 3. You can use Lerna to perform
operations on both packages at once.

npm i -g lerna

The packages can be found in the following directories:

packages/vue2 for Vue 2.x
packages/vue3 for Vue 3.x

Make sure to lint your changes before committing them by running

npm run lint

in the root directory.

Building can be done using npm run build.

License

MIT. See the LICENSE file for more details.

GitHub

View Github