# @henrotaym/vue-3-forms

> Creating reactive forms easily

Latest version **1.0.1** (published 2023-06-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @henrotaym/vue-3-forms
pnpm add @henrotaym/vue-3-forms
yarn add @henrotaym/vue-3-forms
bun add @henrotaym/vue-3-forms
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-06-15 |
| First published | 2023-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 109.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | henrotaym |

## Links

- npm: https://www.npmjs.com/package/@henrotaym/vue-3-forms
- npm.io page: https://npm.io/package/@henrotaym/vue-3-forms

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^3.2.47
- [zod](https://npm.io/package/zod.md) ^3.21.4
- [@henrotaym/helpers](https://npm.io/package/@henrotaym/helpers.md) ^1.2.0

## Recent versions

- 1.0.1 (latest) — 2023-06-15
- 1.0.0 — 2023-06-15
- 0.0.2 — 2023-05-17
- 0.0.1 — 2023-04-20
- 0.0.0 — 2023-04-20

## README

# Creating reactive vue 3 form. 🔥

## Installation
```shell
yarn add @henrotaym/vue-3-forms
```

## Usage
### Composable
```typescript
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
```vue
<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>
```

## Development
### Initialization
```shell
./cli bootstrap
```

### Usage
#### Start dev server
```shell
./cli start
```

#### Stop dev server
```shell
./cli stop
```

#### Yarn
```shell
./cli yarn install
```

#### Publish versions
You should install npm locally and authenticate yourself first.
```shell
npm version patch
```

---
_Source: https://npm.io/package/@henrotaym/vue-3-forms · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._