Goal
Hi I created a small Library which I called Vuetiforms. It came to me since I was rather not satisfied with the current zod integration so I pushed it further.
How It Works
Its a dynamic form component leveraging the vuetify Library. You pass it a zod schema and it creates you all the inputs and the error messages.
<script setup lang="ts">
import AutoForm from "vuetiforms";
import {z} from "zod";
import {ref} from "vue";
const userSchema = z.object({
username: z.string().min(3).max(20),
age: z.number().int().positive(),
location: z.object({
latitude: z.number().min(-90).max(90),
longitude: z.number().min(-180).max(180),
}),
});
const formData = ref({});
const submit = (data: any) => {
console.log(data);
formData.value = data;
}
</script>
<template>
<div class="myForm">
<AutoForm :zod-schema="userSchema" @submit="submit" />
</div>
</template>
I need You
Test out the library see how it fits your need. Make Issue if you want me to do cool features. I have ideas like layout configuration or even v-model props. I just dont want to code it for nobody.
Thank you for your time and see you 🔜.