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.