Vue Integration

Procaptcha provides an official Vue component for easy integration of Prosopo Procaptcha into any Vue project. The integration component supports all the Procaptcha render options.

1. Installation

Section titled 1. Installation

npm install @prosopo/vue-procaptcha-wrapper

2. Example of usage

Section titled 2. Example of usage

2.1) Basic setup

Section titled 2.1) Basic setup

<script setup lang="ts">
import {ProcaptchaComponent} from "@prosopo/vue-procaptcha-wrapper";
</script>

<template>
<ProcaptchaComponent :siteKey={"my-site-key"}/>
</template>

2.2) Advanced usage

Section titled 2.2) Advanced usage

// ...

<ProcaptchaComponent
    :siteKey={"my-site-key"}
    :callbacks={{
        onVerified: (token: string): void => {
            console.log("verified", token);
        },
    }}
    :htmlAttributes={{
        className: "my-app__procaptcha",
        style: {
            maxWidth: "600px",
        },
    }}
/>;