# vue-use-zod-validator

> Simple Zod Form validator composable for Vue 3

Latest version **0.0.7** (published 2023-09-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-use-zod-validator
pnpm add vue-use-zod-validator
yarn add vue-use-zod-validator
bun add vue-use-zod-validator
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2023-09-11 |
| First published | 2023-03-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 11.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | moreta |
| Maintainers | moreta |
| Keywords | vuejs, zod, validator |

## Links

- npm: https://www.npmjs.com/package/vue-use-zod-validator
- Repository: https://github.com/moreta/vue-use-zod-validate
- Homepage: https://github.com/moreta/vue-use-zod-validate#readme
- Issues: https://github.com/moreta/vue-use-zod-validate/issues
- npm.io page: https://npm.io/package/vue-use-zod-validator

## Dependencies (2)

- [zod](https://npm.io/package/zod.md) ^3.21.4
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^9.13.0

## Alternatives

- [vest](https://npm.io/package/vest.md) — 50.1K weekly downloads
- [@regle/core](https://npm.io/package/@regle/core.md) — 47.0K weekly downloads
- [typeof-arguments](https://npm.io/package/typeof-arguments.md) — 12.5K weekly downloads
- [@lokalise/projects-engine-contracts](https://npm.io/package/@lokalise/projects-engine-contracts.md) — 978 weekly downloads
- [@osjwnpm/nam-laboriosam-quibusdam](https://npm.io/package/@osjwnpm/nam-laboriosam-quibusdam.md) — 70 weekly downloads

## Recent versions

- 0.0.7 (latest) — 2023-09-11
- 0.0.6 — 2023-09-11
- 0.0.5 — 2023-09-11
- 0.0.4 — 2023-09-11
- 0.0.3 — 2023-03-11
- 0.0.2 — 2023-03-11
- 0.0.1 — 2023-03-11

## README

# 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
```


```vue

<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>
```

---
_Source: https://npm.io/package/vue-use-zod-validator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._