Vue / Nuxt

npm install @captchacat/vue

<script setup lang="ts">
import { ref } from 'vue'
import { Captchacat } from '@captchacat/vue'
 
const username = ref('')
const password = ref('')
const isVerified = ref(false)
const captchaToken = ref<string | null>(null)
 
const handleVerify = (token: string) => {
  isVerified.value = true
  captchaToken.value = token
}
 
const handleSubmit = async () => {
  const formData = new FormData()
  formData.append('username', username.value)
  formData.append('password', password.value)
  if (captchaToken.value) {
    formData.append('captchacat-token', captchaToken.value)
  }
 
  const res = await fetch('/api/login', {
    method: 'POST',
    body: formData,
  })
 
  if (res.ok) {
    alert('Success!')
  }
}
</script>
 
<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="username" type="text" placeholder="Username" />
    <input v-model="password" type="password" placeholder="Password" />
 
    <Captchacat site-key="YOUR_SITE_KEY" @verify="handleVerify" />
 
    <button type="submit" :disabled="!isVerified">Login</button>
  </form>
</template>

import { validateCaptchacatToken } from '@captchacat/vue/server'
 
export default defineEventHandler(async (event) => {
  const formData = await readMultipartFormData(event)
  if (!formData) {
    throw createError({ statusCode: 400, message: 'Invalid form data' })
  }
 
  // Parse form fields
  const fields: Record<string, string> = {}
  for (const field of formData) {
    if (field.name && field.data) {
      fields[field.name] = field.data.toString()
    }
  }
 
  const { username, 'captchacat-token': token } = fields
 
  // Validate captcha token
  if (!token) {
    throw createError({ statusCode: 400, message: 'Captcha token missing' })
  }
 
  const result = await validateCaptchacatToken({
    apiKey: process.env.CAPTCHACAT_API_KEY!,
    token,
  })
 
  if (!result.valid) {
    throw createError({
      statusCode: 403,
      message: 'Captcha validation failed',
    })
  }
 
  // CAPTCHA valid - process login
  const password = fields['password']
  // ...
 
  return { success: true, username }
})