useCaptcha Composable

Use the composable without the component for custom UIs. The code is shown for demo purposes; in production you would display it differently (e.g. canvas, image).

Enter the 4-digit code shown above

Code for demo: 0611

<script setup>
import { ref } from 'vue'
import { useCaptcha } from 'vue-client-recaptcha'
import 'vue-client-recaptcha/dist/vue-client-recaptcha.css'

const { code, generate, validate, reset } = useCaptcha({
  charsPreset: 'numeric',
  count: 4
})

generate() // Generate initial code

const input = ref('')
const message = ref('')

function check() {
  if (validate(input.value)) {
    message.value = '✓ Correct!'
  } else {
    message.value = '✗ Try again'
    generate()
  }
}
</script>

<template>
  <input v-model="input" placeholder="0000" maxlength="4" />
  <button @click="check">Validate</button>
  <button @click="reset">New Code</button>
  <p>{{ message }}</p>
</template>