Vue SDK

Installation

npm install @crovly/vue

Basic Usage

<script setup lang="ts">
import { ref } from 'vue';
import { CrovlyCaptcha } from '@crovly/vue';

const token = ref<string | null>(null);

function handleVerify(t: string) {
  token.value = t;
}

async function handleSubmit() {
  const res = await fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ token: token.value }),
  });
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <CrovlyCaptcha
      site-key="YOUR_SITE_KEY"
      @verify="handleVerify"
    />
    <button type="submit" :disabled="!token">Submit</button>
  </form>
</template>

Props

Prop	Type	Default	Description
`siteKey`	`string`	—	Your public site key (required)
`apiUrl`	`string`	`https://api.crovly.com`	API endpoint
`theme`	`'light' \| 'dark' \| 'auto'`	`'auto'`	Widget theme
`size`	`'normal' \| 'managed' \| 'invisible'`	`'normal'`	Widget mode
`lang`	`string`	Browser default	Language code
`badge`	`boolean`	`true`	Show "Protected by Crovly" badge
`primaryColor`	`string`	—	Custom accent color (hex, e.g. `#6366f1`)
`responseFieldName`	`string`	`'crovly-token'`	Hidden input field name

Events

Event	Payload	Description
`verify`	`string`	Emitted on successful verification with the token
`error`	`{ code: string, message: string }`	Emitted on error
`expire`	—	Emitted when the token expires

useCrovly Composable

For programmatic control:

<script setup lang="ts">
import { CrovlyCaptcha, useCrovly } from '@crovly/vue';

const { reset, getResponse } = useCrovly();

async function handleSubmit() {
  const token = getResponse();
  if (!token) return;

  const res = await fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ token }),
  });

  if (!res.ok) {
    reset(); // re-run verification
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <CrovlyCaptcha site-key="YOUR_SITE_KEY" />
    <button type="submit">Submit</button>
  </form>
</template>

Composable Methods

Method	Returns	Description
`reset()`	`void`	Reset the widget and re-run verification
`getResponse()`	`string \| null`	Get the current token
`remove()`	`void`	Remove the widget and clean up

Nuxt 3

The widget uses browser APIs, so wrap it in <ClientOnly>:

<template>
  <ClientOnly>
    <CrovlyCaptcha
      site-key="YOUR_SITE_KEY"
      @verify="handleVerify"
    />
  </ClientOnly>
</template>

TypeScript

Full type definitions are included:

import type { CrovlyCaptchaProps } from '@crovly/vue';

On this page