https://github.com/ctrlplusb/vue-zod-form

A composition based API forms helper for Vue 3 projects that utilise TypeScript.
https://github.com/ctrlplusb/vue-zod-form

Last synced: 9 months ago
JSON representation

A composition based API forms helper for Vue 3 projects that utilise TypeScript.

• Host: GitHub
• URL: https://github.com/ctrlplusb/vue-zod-form
• Owner: ctrlplusb
• Created: 2022-03-14T09:47:56.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-03-14T09:50:12.000Z (almost 4 years ago)
• Last Synced: 2025-03-30T10:44:48.999Z (10 months ago)
• Language: Vue
• Size: 79.1 KB
• Stars: 11
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
> WIP

# vue-zod-form

A composition based API forms helper for Vue 3 projects that utilise TypeScript.

```vue

import * as z from "zod";

import { useZodForm } from "vue-zod-form";

const formSchema = z.object({

  name: z.string().nonempty(),

  email: z.string().nonempty().email(),

  password: z.string().nonempty().min(8),

});

const { field, handleSubmit, isSubmitting } = useZodForm(formSchema);

const name = field("name");

const email = field("email");

const password = field("password");

const onSubmit = handleSubmit(async (data) => {

  await new Promise((resolve) => setTimeout(resolve, 2000));

  alert(JSON.stringify(data, null, 2));

});

  

    

    

    Submit

  

```