vue-validate-code

Install

npm i vue-validate-code

yarn add vue-validate-code

pnpm add vue-validate-code

Usage

<script lang="ts" setup>
import { 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) {
  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