vue-use-zod-validator

vue-use-zod-validator

Simple Zod Form validator composable for Vue Composition API

• Working with plain html tag. You don't need to use custom components.

Dependencies

• vue3
• zod
• @vueuse/core
  • watchDebounced used.
  • https://vueuse.org/shared/watchDebounced/#watchdebounced

Usage

Install package

pnpm i zod @vueuse/core vue-use-zod-validator

<template>
  <div>
    <div class="field-email">
      <label>email</label>
      <input type="email" v-model.trim="values.email">
      <div v-if="errors.email">
        <p
                v-for="e in errors.email"
                :key="e.errorCode"
        >
          {{ e.message }}
        </p>
      </div>
    </div>
    <div class="field-password">
      <label>password</label>
      <input type="email" v-model.trim="values.password">
      <div v-if="errors.password">
        <p
                v-for="e in errors.password"
                :key="e.errorCode"
        >
          {{ e.message }}
        </p>
      </div>
    </div>
    <div>
      <button disabled="!isValid" @click="handleSubmit">
        Submit
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { z } from 'zod'
import { useZodValidator } from 'vue-use-zod-validator'

type SignInParams = {
  email: string
  password: string
}

const schema = z.object({
  email: z.string().required().email(),
  password: z.string().required().min(8),
})

const {
  values,
  errors,
  isValid,
  validate,
} = useZodValidator<SignInParams>(schema, {
  email: '',
  password: '',
})

const handleSubmit = async () => {
  const result = await validate()
  if (result.isValid) {
    // valid input data
    // emit('submit', result.values)
  } else {
    // invalid input data
    // show error message for form level
  }
}
</script>