https://github.com/dethdkn/nuxt-cap
🧢 Integrate Cap into your Nuxt websites/applications.
https://github.com/dethdkn/nuxt-cap
Last synced: 4 months ago
JSON representation
🧢 Integrate Cap into your Nuxt websites/applications.
- Host: GitHub
- URL: https://github.com/dethdkn/nuxt-cap
- Owner: dethdkn
- License: mit
- Created: 2026-02-14T03:07:19.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-02-14T15:36:16.000Z (4 months ago)
- Last Synced: 2026-02-14T23:32:55.580Z (4 months ago)
- Language: Vue
- Size: 98.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
nuxt-cap
🧢 Integrate Cap into your Nuxt websites/applications.
## 🚀 Setup
Install `nuxt-cap` dependency to your project:
```sh
npx nuxt module add nuxt-cap
```
## ⚙️ Configuration
You can configure **nuxt-cap** in two ways:
### 1️⃣ Using `nuxt.config.ts`
Set the `apiEndpoint` directly in your Nuxt configuration:
```ts
export default defineNuxtConfig({
cap: {
apiEndpoint: 'https://cap.example.com//',
},
})
```
---
### 2️⃣ Using an Environment Variable (Recommended)
```bash
NUXT_PUBLIC_CAP_API_ENDPOINT="https://cap.example.com//"
```
Because this uses **Nuxt runtimeConfig**, it supports runtime environment variables — meaning you can change the endpoint **after build time** without rebuilding your application.
## 🧩 `` Component
This module auto-imports a component called:
```vue
```
---
## 📡 Emits
The component exposes four events:
- `@solve`
- `@error`
- `@reset`
- `@progress`
### Example
```vue
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)
}
```
## 🧱 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:
```ts
navigator.hardwareConcurrency || 8
```
---
### `i18n?: object`
Optional.
Allows you to customize the widget language.
```ts
{
verifyingLabel?: string
initialState?: string
solvedLabel?: string
errorLabel?: string
wasmDisabled?: string
verifyAriaLabel?: string
verifyingAriaLabel?: string
verifiedAriaLabel?: string
errorAriaLabel?: string
}
```
### Example
```vue
```
## 🎨 Customizing Appearance
To customize Cap’s appearance, follow the official Cap widget customization guide:
[Customizing](https://capjs.js.org/guide/widget.html#customizing)
## 🔄 Reset
To reset the Cap widget programmatically, you can use the provided helper function:
```ts
resetCap()
```
### Example
```vue
function handleReset(): void {
// ...anything
resetCap()
}
Reset Cap
```
Calling `resetCap()` will reset the current widget state, allowing the challenge to be solved again.
## 👻 Invisible Mode
For invisible mode, you can use the `useCap()` composable.
It returns a Cap instance, similar to the one described in the official invisible guide:
[Guide](https://capjs.js.org/guide/invisible.html)
You can call any available Cap instance method, such as `cap.solve()`.
### Example
```vue
const cap = useCap()
async function testCap(): Promise<void> {
if (!cap) return
const { token } = await cap.solve()
console.log(token)
}
Solve Invisible Cap
```
This allows you to manually trigger the proof-of-work challenge without rendering the `` checkbox widget.
## 📝 License
Copyright © 2026 [Gabriel 'DethDKN' Rosa](https://github.com/dethdkn)\
This project is under [MIT license](https://github.com/dethdkn/nuxt-cap/blob/main/LICENSE)