Intégration Vue

Procaptcha fournit un composant Vue officiel pour une intégration facile de Prosopo Procaptcha dans n’importe quel projet Vue. Le composant d’intégration prend en charge toutes les options de rendu Procaptcha.

1. Installation

Titre de la section 1. Installation

npm install @prosopo/vue-procaptcha-wrapper

2. Exemple d’utilisation

Titre de la section 2. Exemple d’utilisation

2.1) Configuration de base

Titre de la section 2.1) Configuration de base

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

<template>
  <ProcaptchaComponent :siteKey="siteKey" />
</template>

<script setup lang="ts">
const siteKey = 'my-site-key';
</script>

2.2) Utilisation avancée

Titre de la section 2.2) Utilisation avancée

// ...

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

const siteKey = 'my-site-key';

const callbacks = {
  onVerified: (token: string) => {
    console.log("verified", token);
  },
};

const htmlAttributes = {
  class: "my-app__procaptcha",
  style: {
    maxWidth: "600px",
  },
};
</script>

<template>
  <ProcaptchaComponent
    :siteKey="siteKey"
    :callbacks="callbacks"
    :htmlAttributes="htmlAttributes"
  />
</template>