Zod + Vuetify = ๐Ÿ’ฃ Vuetiforms

DAIKH NASSIMDAIKH NASSIM
1 min read

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 ๐Ÿ”œ.

3
Subscribe to my newsletter

Read articles from DAIKH NASSIM directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

DAIKH NASSIM
DAIKH NASSIM

I am a developper from France Looking for improving and sharing