@henrotaym/vue-3-forms NPM

Creating reactive vue 3 form. 🔥

Installation

yarn add @henrotaym/vue-3-forms

Usage

Composable

import { Field, useReactiveForm } from "../lib";
import { z } from "zod";

const useExampleForm = () => {
  const title = new Field({
    label: "title",
    value: "this is my title",
    validation: z.string(),
  });

  const description = new Field({
    label: "description",
    value: "this is my description",
    validation: z.string(),
  });

  const ratings = new Field({
    label: "ratings",
    value: 0,
    validation: z.number(),
  });

  const isUsing = new Field({
    label: "isUsing",
    value: true,
    validation: z.boolean(),
  });

  const form = useReactiveForm({
    ratings,
    title,
    description,
    isUsing,
  });

  form.onSubmit(async () => {
    // Executed only if form is valid and not already loading
    console.log(Object.keys(form.dirtyFields));
    form.clear();
  });

  return form;
};

export default useExampleForm;

Form component

<script setup lang="ts">
import { useExampleForm } from "../composables";
import { FormContainer, FormField } from "@henrotaym/vue-3-forms";

const form = useExampleForm();
</script>

<template>
  <FormContainer :form="form" class="w-[500px]">
    <FormField :form-field="form.fields.title"></FormField>
    <FormField :form-field="form.fields.description"></FormField>
    <FormField :form-field="form.fields.isUsing"></FormField>
    <FormField :form-field="form.fields.ratings"></FormField>
  </FormContainer>
</template>