Integración con Vue

Procaptcha proporciona un componente oficial de Vue para una fácil integración de Prosopo Procaptcha en cualquier proyecto Vue. El componente de integración admite todas las opciones de renderizado de Procaptcha.

1. Instalación

Sección titulada 1. Instalación

npm install @prosopo/vue-procaptcha-wrapper

2. Ejemplo de uso

Sección titulada 2. Ejemplo de uso

2.1) Configuración básica

Sección titulada 2.1) Configuración básica

<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) Uso avanzado

Sección titulada 2.2) Uso avanzado

// ...

<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>