TrustComponent
Vue.js
TrustCaptcha · Bot protection

Vue.js CAPTCHA Integration

TrustCaptcha is a Vue.js CAPTCHA that protects logins, registrations and contact forms in your Vue app with risk-based bot detection. This guide shows how to embed the widget and verify each check on your server. Privacy-first, EU-hosted, GDPR-compliant and built for accessibility, with no image puzzles.

Quickstart

How the integration works

1. Create a CAPTCHA

Create a user account or log in with an existing one. Then create a new CAPTCHA or pick an existing one. If you want to try TrustCaptcha first, every plan comes with a 14-day free trial.

The CAPTCHA overview page shows your site key and license key, and you create your API key there. Add your website’s domains to the authorized domains in the CAPTCHA security rules so they can use your CAPTCHA.

Start of the CAPTCHA creation form.
CAPTCHA security rules of a demo CAPTCHA.

2. Integrate the CAPTCHA widget into your frontend

The following steps show roughly how to add the TrustCaptcha widget to a Vue.js frontend. For the full instructions, read the CAPTCHA integration guide for Vue.js in our documentation.

Read the documentation

First, install our TrustCaptcha Vue.js package:

Install
bash
npm i @trustcomponent/trustcaptcha-vue

Register the TrustCaptcha element as a custom element:

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

Add the TrustCaptcha component to your application:

main.js
JavaScript
import {TrustcaptchaComponent} from "@trustcomponent/trustcaptcha-vue";

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

Then add the CAPTCHA widget, the trustcaptcha-component HTML tag, to any HTML form:

app.vue
Vue
<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:

CAPTCHA start

Need detailed information about the Vue.js CAPTCHA integration?
Our Vue.js CAPTCHA integration guide has the detailed instructions, and our CAPTCHA samples repository on GitHub has a complete integration example.

Other frontend technology instead of Vue.js?
If you build with something other than Vue.js, or run several websites and apps, pick a different framework or platform here. If we have no pre-built integration for your frontend technology yet, your developers can integrate the CAPTCHA themselves using our documentation or ask our support team for a pre-built integration.

Angular
Contact Form 7
Craft CMS
JavaScript
Joomla
JTL-Shop
Keycloak
Magento 2
React
Shopware 6
Svelte
TYPO3
Vue
Webflow
WordPress

3. Validate the CAPTCHA result in your backend

When the CAPTCHA is complete, send the verification token to your backend. There, fetch the verification result from our servers and check it. How you proceed depends on the bot risk. You can find details on backend integration and result validation in our documentation.

Pre-built backend integrations
Our pre-built integrations add the CAPTCHA validation to your backend service. If there is none for your backend technology yet, your developers can integrate the validation themselves using our documentation or ask our support team for a pre-built integration.

.NET
Go
Groovy
Java
Kotlin
Node.js
PHP
Python
Ruby
Rust
Scala

4. Test your integration

TrustCaptcha is now active. Send a test request and check that it goes through.

CAPTCHA done

FAQs

What is TrustCaptcha for Vue, and is it a Vue reCAPTCHA alternative?
TrustCaptcha is a privacy-friendly CAPTCHA widget you can add to Vue forms to stop bots and spam without image puzzles. It combines proof-of-work with a risk-based verification result and optional security rules, so you can protect sign-ups, contact forms, checkouts, and more. If your Vue app runs reCAPTCHA v2 or v3 today, you swap the reCAPTCHA component for the TrustCaptcha component and check the new token on your server.
How does the Vue integration work (in simple terms)?
You place the TrustCaptcha widget in your Vue form. After a user completes it, your page receives a verification token. Your backend sends that token to TrustCaptcha to fetch the verification result (for example, a risk score) and then decides whether to accept or block the request.
What do I need to set it up in a Vue project?
You need a TrustCaptcha account and a CAPTCHA "sitekey" from your dashboard, plus the Vue package. In your Vue project you install the package, register the component once, and then place the <trustcaptcha-component> on the page with your sitekey.
Does the widget have to be inside a <form> element?
Yes. The TrustCaptcha component must be placed inside an HTML <form>. If your page doesn’t use forms today, you can wrap a small form around the widget and your submit button.
Do I still need server-side validation?
Yes, always. The verification token from the browser must be checked on your server (using your API key) to retrieve the official verification result. Without server-side validation, the integration is not secure.
How do I get the verification token, and how long is it valid?
After a successful verification, the token is available either as a hidden form field (default name: tc-verification-token) or via the captchaSolved event. By default, the verification token is single-use and valid for 15 minutes. On the Enterprise plan you can extend the validity and allow a limited number of retrievals. For multi-step flows, place the widget near the final submit step.
Can I use more than one TrustCaptcha widget on the same page?
Yes. Multiple forms can each have their own widget. If you place multiple widgets inside the same form, make sure each widget uses a different token field name (or rely on events) so tokens don’t overwrite each other.
Can I customize language, theme, or branding?
Yes. You can set basics like language and a light or dark theme. Custom design and a custom privacy link need a license key, and custom design is included from the Team plan. A fully invisible widget and hiding our branding are the paid Captcha Branding add-on.
Losing leads to CAPTCHAs?

TrustCaptcha blocks spam and bots, not customers. No puzzles, GDPR-compliant, EU-hosted.

CAPTCHA start
CAPTCHA done
No puzzles for visitors
The check runs in the background while visitors type, so more people finish your forms instead of giving up.
GDPR-compliant
Hosted in the EU, no cookies, encrypted transmission and automatic data deletion. Every customer gets a Data Processing Agreement.
Multi-layer security
Adaptive proof-of-work and risk scoring stop abuse early, even when attack traffic spikes.
Full control
Set the sensitivity, keep allow and block lists and use geoblocking. You decide how strict the check is.

Protect your Vue.js application with TrustCaptcha in just a few steps!

  • EU-hosted & GDPR-compliant
  • No puzzles
  • Try free for 14 days
Get started Contact sales