vue-validate-code

vue-validate-code

[!WARNING] vue-validate-code generates and validates codes entirely in the browser. The SVG renderer exposes its characters as DOM text, and client-side checks can always be bypassed. Use it only as a visual interaction aid—not as CAPTCHA, authentication, or abuse prevention. Security-sensitive flows require a server-generated challenge with server-side validation.

Install

npm i vue-validate-code

yarn add vue-validate-code

pnpm add vue-validate-code

Usage

<script lang="ts" setup>
import { ref, useTemplateRef } from 'vue'
import { ValidateCode } from 'vue-validate-code'

const validateCode = ref('')
const validateCodeRef = useTemplateRef('validateCodeRef')

function handleTriggerValidate() {
  if (!validateCode.value) {
    return console.log('No validate code value')
  }
  validateCodeRef.value?.validate(validateCode.value)
}
function handleValidateCallback(isValid: boolean) {
  if (isValid) {
    console.log('validate success')
  } else {
    console.log('validate fail')
    validateCodeRef.value?.update()
  }
}
</script>

<template>
  <ValidateCode
    @validate="handleValidateCallback"
    ref="validateCodeRef"
    renderer="svg"
  />
  <input
    v-model="validateCode"
    placeholder="Fill the validate code"
  />
  <button
    @click="handleTriggerValidate"
    type="button"
  >
    Validate
  </button>
</template>

Renderer

ValidateCode supports two built-in renderers:

• canvas (default)
• svg

<ValidateCode renderer="canvas" />

<ValidateCode renderer="svg" />

Docs

Check more examples and APIs in Docs

License

MIT License © 2025 to PRESENT ntnyq