nuxt-cap

nuxt-cap

🧢 Integrate Cap into your Nuxt websites/applications.

📚 Full Documentation

🚀 Setup

Install nuxt-cap dependency to your project:

npx nuxt module add nuxt-cap

Or manually

1. Install with your favorite package manager:

   • bun : bun add nuxt-cap
   • npm : npm i nuxt-cap
   • pnpm : pnpm add nuxt-cap
   • yarn : yarn add nuxt-cap

2. Add it to your modules section in your nuxt.config:

export default defineNuxtConfig({
  modules: ['nuxt-cap'],
  cap: {
    // ...configs
  },
})

⚙️ Configuration

You can configure nuxt-cap in two ways:

1️⃣ Using nuxt.config.ts

Set the apiEndpoint directly in your Nuxt configuration:

export default defineNuxtConfig({
  cap: {
    apiEndpoint: 'https://cap.example.com/<KEY>/',
  },
})

2️⃣ Using an Environment Variable (Recommended)

NUXT_PUBLIC_CAP_API_ENDPOINT="https://cap.example.com/<KEY>/"

Because this uses Nuxt runtimeConfig, it supports runtime environment variables — meaning you can change the endpoint after build time without rebuilding your application.

🧩 <Cap /> Component

This module auto-imports a component called:

<Cap />

📡 Emits

The component exposes four events:

• @solve
• @error
• @reset
• @progress

Example

<script setup lang="ts">
  function onSolve(event: CapSolveEvent): void {
    console.log('Solved:', event)
  }

  function onError(event: CapErrorEvent): void {
    console.error('Error:', event)
  }

  function onReset(event: CapResetEvent): void {
    console.log('Reset:', event)
  }

  function onProgress(event: CapProgressEvent): void {
    console.log('Progress:', event)
  }
</script>

<template>
  <Cap @solve="onSolve" @error="onError" @reset="onReset" @progress="onProgress" />
</template>

🧱 Props

workerCount?: number

Optional.

Defines how many Web Workers Cap should use to solve the proof-of-work challenge.

If not set, Cap defaults to:

navigator.hardwareConcurrency || 8

i18n?: object

Optional.

Allows you to customize the widget language.

{
  verifyingLabel?: string
  initialState?: string
  solvedLabel?: string
  errorLabel?: string
  wasmDisabled?: string
  verifyAriaLabel?: string
  verifyingAriaLabel?: string
  verifiedAriaLabel?: string
  errorAriaLabel?: string
}

Example

<template>
  <Cap
    :worker-count="4"
    :i18n="{
      verifyingLabel: 'Verificando...',
      solvedLabel: 'Verificado',
      errorLabel: 'Erro',
    }" />
</template>

🎨 Customizing Appearance

To customize Cap’s appearance, follow the official Cap widget styling guide: Styling

🔄 Reset

To reset the Cap widget programmatically, you can use the provided helper function:

resetCap()

Example

<script setup lang="ts">
  function handleReset(): void {
    // ...anything
    resetCap()
  }
</script>

<template>
  <button @click="handleReset">Reset Cap</button>

  <Cap />
</template>

Calling resetCap() will reset the current widget state, allowing the challenge to be solved again.

🪄 useCap composable

You can use the useCap() composable for programmatic mode.

It returns a Cap instance, similar to the one described in the official programmatic mode guide:

Guide

You can call any available Cap instance method, such as cap.solve().

Example

<script setup lang="ts">
  const cap = useCap()

  async function testCap(): Promise<void> {
    if (!cap) return

    const { token } = await cap.solve()
    console.log(token)
  }
</script>

<template>
  <button @click="testCap">Solve Invisible Cap</button>
</template>

This allows you to manually trigger the proof-of-work challenge without rendering the <Cap /> checkbox widget.

📝 License

Copyright © 2026 Gabriel 'DethDKN' Rosa
This project is under MIT license