Integrazione Vue

Procaptcha fornisce un componente ufficiale Vue per una facile integrazione di Prosopo Procaptcha in qualsiasi progetto Vue. Il componente di integrazione supporta tutte le opzioni di rendering Procaptcha.

1. Installazione

Sezione intitolata 1. Installazione

npm install @prosopo/vue-procaptcha-wrapper

2. Esempio di utilizzo

Sezione intitolata 2. Esempio di utilizzo

2.1) Configurazione base

Sezione intitolata 2.1) Configurazione 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) Utilizzo avanzato

Sezione intitolata 2.2) Utilizzo avanzato

// ...

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