Captcha

Vue Bootstrap 5 Captcha plugin

Vue Captcha is a form validation component based on Recaptcha. It protects you against spam and other types of automated abuse.
Official documentation.

Note: Read the API tab to find all available options and advanced customization

Basic example

        
            
          <template>
            <MDBCaptcha siteKey="YOUR_SITEKEY" />
          </template>
          
        
    
        
            
           <script>
            import { MDBCaptcha } from 'mdb-vue-captcha';

            export default {
              components: {
                MDBCaptcha
              },
            };
          </script>
          
        
    
        
            
           <script setup lang="ts">
            import { MDBCaptcha } from 'mdb-vue-captcha';
          </script>

Dark theme example

You can set dark theme via theme="dark" property.

        
            
              <template>
                <MDBCaptcha siteKey="YOUR_SITEKEY" theme="dark" />
              </template>
              
        
    
        
            
                <script>
                  import { MDBCaptcha } from 'mdb-vue-captcha';

                  export default {
                    components: {
                      MDBCaptcha
                    },
                  };
                </script>
              
        
    
        
            
                <script setup lang="ts">
                  import { MDBCaptcha } from 'mdb-vue-captcha';
                </script>

Captcha - API

Import

        
            
        import { MDBCaptcha } from "mdb-vue-captcha";

Properties

Name Type Values Default Description
sitekey String - null Required. Defines your sitekey.
theme String light
dark 		light Optional. Defines theme for Captcha.
size String normal
compact 		normal Optional. Defines the size of the widget.
tabindex Number - 0 Optional. Defines the tabindex of the widget and chellenge. If other elements in your page use tabindex, it should be set to make user navigation easier.
lang String "pl", "en", "es" etc. en Optional. Defines the language of the widget.

Methods

Name Description
reset Reset the Captcha plugin instance.reset()
getResponse Returns Captcha response key instance.getResponse() 
        
            
          <template>
            <MDBBtn color="primary" @click="captchaRef?.reset()">Reset</MDBBtn>
            <MDBCaptcha siteKey="YOUR_SITEKEY" ref="captchaRef" />
          </template>
          
        
    
        
            
          <script>
            import { MDBCaptcha } from "mdb-vue-captcha";
            import { MDBBtn } from "mdb-vue-ui-kit";
            import { ref } from "vue";

            export default {
              components: {
                MDBBtn,
                MDBCaptcha,
              },
              setup(){
                const captchaRef = ref(null);
                
                return {
                  captchaRef
                }
              }
            }
            
          </script>
          
        
    
        
            
          <script setup lang="ts">
            import { MDBCaptcha } from "mdb-vue-captcha";
            import { MDBBtn } from "mdb-vue-ui-kit";
            import { ref } from "vue";
            
            const captchaRef = ref<InstanceType<typeof MDBCaptcha> | null>(null);
          </script>

Events

Name Description
error Emmited when CAPTCHA encounters an error.
expired Emmited when CAPTCHA response expires and the user needs to solve a new CAPTCHA.
success Emmited when user submits a successful CAPTCHA response 
        
            
        <template>
          <MDBCaptcha siteKey="YOUR_SITEKEY" ref="captchaRef" @error="doSomething" />
        </template>