1. numcaptcha-vue

numcaptcha-vue


numCaptchaVUE is a VueJS Plugin that allows you to use numCAPTCHA easily on your website.


Usage

In your vue app, install the plugin from npm as a dependency

npm i --save numcaptcha-vue

In your main.js, call the Vue.use() global method to use the plugin.

:warning: numCaptchaVUE uses Font Awesome icons hence please install the neccessary packages. Also, do remember to pass FontAwesomeIcon and fas as options into the plugin.

 // firstly, import and use Font Awesome
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

library.add(fas);
Vue.component('font-awesome-icon', FontAwesomeIcon);

// then, import and use numCaptcha
import NumCaptcha from 'numcaptcha-vue';

Vue.use(NumCaptcha, { FontAwesomeIcon, fas });

/* ... rest of main.js ... */

After importing the plugin, you can use it anywhere in your vue application using the <num-captcha /> component.

The component emits an event called status with the value of success when the user successfully completed numCaptcha or with the value of failed when the user is identified as a bot

 <num-captcha @status="success | failed" />

Dependencies

  • https://www.npmjs.com/package/@fortawesome/vue-fontawesome

Others numCAPTCHA Libraries...

If you are using plain Javascript, do check out numCaptchaJS :tada: