Trustcaptcha

Vue

The following tutorial will show you how to integrate Trustcaptcha into Vue.

Preparation

Before starting the implementation of Trustcaptcha in your Vue project, you should make the following preparations.

Requirements

  • An account with Trustcaptcha and an existing CAPTCHA.
  • A project with Vue where Trustcaptcha should be integrated.

Knowledge (recommended)

  • Basic knowledge in Vue
  • Understanding of the basic functioning of Trustcaptcha and its implementation in the frontend.

Add Dependency

To use Trustcaptcha, you first need to add the relevant dependencies to your project.

NPM

Install the Trustcaptcha library using npm.

Use Library

Below you will learn how to use the library.

Fix Warnings

To prevent Vue warnings, you should add Trustcaptcha as a custom component.

Add Component

Add the TrustcaptchaComponent to the App.

Trustcaptcha Component

Include the Trustcaptcha component in all desired form elements. Specify the site-key. Define what should happen when the CAPTCHA is successfully solved and what should occur in the event of a failure.

Example with Vue

The example below shows a possible implementation with Vue.
An example including source code can be found on Github.