arcaptcha-vue

ARCaptcha Vue

ARCaptcha Component Library for Vue.js which is Compatible with Vue 2. (Vue3 support is under development)

If you use Vue version 3 please go to this link.

Installation

You can install this library via npm with:

• vue2: npm install arcaptcha-vue --save

or via yarn:

• vue2: yarn add arcaptcha-vue

or via script tag (Vue must be globally available)

• vue2

  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/arcaptcha-vue"></script>
  

Usage

• Basic:

  <template>
      <arcaptcha-vue site_key="YOUR_SITE_KEY"></arcaptcha-vue>
  </template>
  
  <script>
    import ArcaptchaVue from 'arcaptcha-vue';
    export default {
      components: { ArcaptchaVue }
    };
  </script>
  

• Invisible:

  <template>
    <div>
        <arcaptcha-vue site_key="YOUR_SITE_KEY" :callback="onSuccess" :invisible="true" ref="widget"></arcaptcha-vue>
  
        <button @click="execute">load invisible captcha</button>
        <button @click="reset">reset captcha</button>
  
    </div>
  </template>
  
  <script>
  import ArcaptchaVue from "arcaptcha-vue";
  export default {
    components: { ArcaptchaVue },
    methods: {
        onSuccess(token) {
            console.log("Captcha Solved! token:", token);
        },
        reset() {
            this.$refs.widget.reset();
        },
        execute() {
            this.$refs.widget.execute();
        },
    },
  };
  </script>
  

• Invisible with promise:

  <template>
    <div>
        <arcaptcha-vue site_key="YOUR_SITE_KEY" :invisible="true" ref="widget"></arcaptcha-vue>
  
        <button @click="execute">load invisible captcha with promise</button>
        <button @click="reset">reset captcha</button>
  
    </div>
  </template>
  
  <script>
  import ArcaptchaVue from "arcaptcha-vue";
  export default {
    components: { ArcaptchaVue },
    methods: {
        reset() {
            this.$refs.widget.reset();
        },
        execute() {
              this.$refs.widget.execute().then((token)=>{
                  console.log("Captcha Solved! token:", token);
              })
          },
      },
  };
  </script>
  

JS API

Props

Methods

FAQ

How can I get a sitekey?

Sign up at ARCaptcha to get your sitekey. Check documentation for more information.

Demo

To run the demo:

1. clone this repo git clone https://github.com/arcaptcha/arcaptcha-vue.git
2. cd example/
3. yarn && yarn serve
   • it will start the demo app on localhost:8080