Vue.js CAPTCHA Integration

Create a user account or log in with an existing one. Then create a new CAPTCHA or select an existing one. If you’re unsure whether TrustCaptcha is right for you, try our CAPTCHA service risk-free for 14 days at no cost.

On the CAPTCHA overview page, you will find all the important information, such as the site key, secret key and licence key. Allow your websites to access your CAPTCHA by simply adding them to the access authorised domain list in the CAPTCHA security rules.

The following steps give you a rough idea of how to integrate the TrustCaptcha CAPTCHA widget into an Vue.js frontend. For precise, detailed instructions, please read the CAPTCHA integration guide for Vue.js in our documentation.

First, install our TrustCaptcha Vue.js package:

npm i @trustcomponent/trustcaptcha-vue

Register the TrustCaptcha element as a custom element:

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('trustcaptcha'),
        }
      }
    }),
  ],
})

Add the TrustCaptcha component to your application:

import {TrustcaptchaComponent} from "@trustcaptcha/trustcaptcha-vue";

createApp(App).use(TrustcaptchaComponent).mount('#app')

Now insert the CAPTCHA widget, the so-called trustcaptcha-component HTML tag, into any HTML form:

<form>
  <!-- your input fields -->
  <trustcaptcha-component
    sitekey="<your_site_key>"
    @captchaSolved="handleSuccess($event.detail)"
    @captchaFailed="handleError($event.detail)"
    ></trustcaptcha-component>
  <!-- further input fields / submit button -->
</form>

The CAPTCHA widget will now be displayed on your Vue.js website:

Need detailed information about the Vue.js CAPTCHA integration?
For detailed instructions on integrating TrustCaptcha, please refer to our Vue.js CAPTCHA integration guide. A complete integration example for the Vue.js CAPTCHA can be found in our CAPTCHA Samples Repository on Github.

Other frontend technology instead of Vue.js?
If you do not want to use Vue.js or have several websites or applications, you can select a different framework or platform here. If there is no pre-built integration from us for your preferred frontend technology, your software developers can integrate the CAPTCHA themselves using our documentation or ask our support-team for a pre-built integration solution.

Once the CAPTCHA is complete, take the verification token and send it to your backend. In your backend, retrieve the CAPTCHA verification result from our servers and validate the result. Depending on how high the bot risk is, you decide how to proceed. You can find detailed information on backend integration and result validation in our documentation.

Prebuild backend integrations
You can use one of our pre-built integrations to integrate the CAPTCHA validation process into your backend service. If there is no pre-built integration from us for your preferred backend technology, your software developers can integrate the CAPTCHA themselves using using our documentation or ask our support-team for a pre-built integration solution.

You are now protected by TrustCaptcha - congratulations!