Vue SDK reference

@revokegpt/vue is a thin Vue 3 wrapper over @revokegpt/js: a RevokeGPT component and a useRevokeGPT composable. It is a render-function component, so no SFC build step is needed, and it touches no window during a server render. Peer dependency: vue ^3.4. For a walkthrough, see the Vue quickstart.

Install

Not published yet

@revokegpt/vue is not on its registry yet, so install it from a checkout of the repository as in the quickstart. After the first release the registry command applies.

npm install @revokegpt/vue @revokegpt/js     # after the first release

Exports

RevokeGPT, useRevokeGPT, and the types RevokeGPTExposed, UseRevokeGPTOptions, UseRevokeGPTResult, Badge, Locale, Size, Theme.

Options

RevokeGPT props

Prop	Type	Default	Meaning
sitekey	string	required	Your site key (rgpk_...).
theme	'light' | 'dark' | 'auto'	none	Widget theme.
size	'normal' | 'compact' | 'invisible'	invisible	Widget size.
hl	Locale	none	Widget language.
action	string	none	The action the token is issued for.
cdata	string	none	Optional string passed with the widget.
tabIndex	number	none	The widget frame’s tab order.
badge	'bottomright' | 'bottomleft' | 'inline'	bottomright	Invisible size only.
origin	string	https://js.revokegpt.com	Widget origin, a bare https: origin, validated by @revokegpt/js.
nonce	string	none	CSP nonce for the injected script.
modelValue	string	''	v-model: the live token, cleared to '' on expiry.

Events: verify(token), expire(), error(code), update:modelValue(token).

Changing sitekey, size, theme, hl, action, cdata, tabIndex, badge, origin or nonce destroys the widget and renders a new one. The widget is destroyed on unmount.

useRevokeGPT options

useRevokeGPT(opts) takes an options object, a ref or a getter.

Option	Type	Default	Meaning
sitekey	string	required	Your site key.
action	string	none	The default action. execute(action) overrides it per call.
cdata	string	none	Optional string passed with the widget.
hl	Locale	none	Widget language.
theme	Theme	none	Widget theme.
badge	Badge	bottomright	Badge position.
origin	string	https://js.revokegpt.com	Widget origin.
nonce	string	none	CSP nonce.

The widget is always invisible. Changing any option except action recreates it; action is read when a request starts.

Methods

Component instance

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

const token = ref('');
const captcha = ref<InstanceType<typeof RevokeGPT>>();
</script>

<template>
  <RevokeGPT ref="captcha" v-model="token" sitekey="rgpk_..." size="normal" @error="onError" />
</template>

interface RevokeGPTExposed {
  execute(): Promise<string>;
  reset(): void;
  getResponse(): string;
}

• execute() runs the challenge and resolves with the token. It rejects with Error('widget is not ready') before the widget exists.
• reset() resets the widget and clears v-model.
• getResponse() returns the live token, or ''.

useRevokeGPT

function useRevokeGPT(opts: MaybeRefOrGetter<UseRevokeGPTOptions>): { execute(action?: string): Promise<string>; ready: Readonly<Ref<boolean>> }

Call it in setup(); outside a component it throws in development. It touches the DOM only after mount, so it is safe during SSR, but execute() rejects until the widget is ready. Calls run one at a time.

const { execute, ready } = useRevokeGPT({ sitekey: 'rgpk_...', action: 'login' });
const token = await execute('checkout'); // the action argument is optional

Errors and failure model

• A script that fails to load, or a bad origin, emits error with load-error.
• A render failure emits error with render-error.
• Other codes come from the widget (for example network-error). See errors.
• useRevokeGPT().execute rejects when the script fails to load, after unmount, or if the widget is not ready.

Configuration

No environment variables. Allow the widget origin in script-src and frame-src, or pass nonce; see session tokens and cookies.

In Nuxt, do not render the widget on the server:

<ClientOnly>
  <RevokeGPT v-model="token" sitekey="rgpk_..." />
</ClientOnly>

Security notes

• The token is only a claim until your server verifies it (Node.js, Python, PHP or siteverify).
• There is no script-URL prop. origin takes a bare https: origin and is validated by @revokegpt/js.