Integração Vue

Procaptcha fornece um component Vue oficial para fácil integração do Prosopo Procaptcha em qualquer projeto Vue. O component de integração suporta todas as opções de renderização do Procaptcha.

1. Instalação

Seção intitulada 1. Instalação

npm install @prosopo/vue-procaptcha-wrapper

2. Exemplo de uso

Seção intitulada 2. Exemplo de uso

2.1) Configuração básica

Seção intitulada 2.1) Configuração 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 avançado

Seção intitulada 2.2) Uso avançado

// ...

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