Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vanilla-icecream/vue-formor
Form validation for Vue in composition functions with Valibot.
https://github.com/vanilla-icecream/vue-formor
composition form schema validation vue yup zod
Last synced: about 1 month ago
JSON representation
Form validation for Vue in composition functions with Valibot.
- Host: GitHub
- URL: https://github.com/vanilla-icecream/vue-formor
- Owner: Vanilla-IceCream
- License: mit
- Created: 2021-08-20T09:21:43.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-10T08:16:28.000Z (3 months ago)
- Last Synced: 2024-09-10T10:31:07.639Z (3 months ago)
- Topics: composition, form, schema, validation, vue, yup, zod
- Language: TypeScript
- Homepage: https://vitesheet.onrender.com/vue-formor/
- Size: 631 KB
- Stars: 5
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-formor
Form validation for Vue in composition functions with Valibot.
The main branch refers to the `vue-formor` v5 release. Check out the [v4.x branch](https://github.com/Vanilla-IceCream/vue-formor/tree/v4.x) for v4.
If you need to use `valibot` v0.30 or lower, please install `vue-formor` v4.x instead.
## Installation
Install `vue-formor` with your favorite package manager:
```sh
$ npm i vue-formor
# or
$ yarn add vue-formor
# or
$ pnpm i vue-formor
# or
$ bun add vue-formor
```
> [!NOTE]
>
> Don't forget to install `valibot`.
## Usage
```vue
import { reactive, toRef } from 'vue';
import { useSchema } from 'vue-formor';
import * as v from 'valibot';
interface BasicForms {
email?: string;
password?: string;
}
const state = reactive({
loginForm: {} as BasicForms,
loginValdn: {} as Record<keyof BasicForms, string>,
});
const msgs = {
required: `This is a required field`,
email: `This must be a valid email`,
min: `This must be at least 8 characters`,
};
const schema = useSchema(
v.object({
email: v.nullish(v.pipe(v.string(), v.minLength(1, msgs.required), v.email(msgs.email)), ''),
password: v.nullish(
v.pipe(v.string(), v.minLength(1, msgs.required), v.minLength(8, msgs.min)),
'',
),
}),
toRef(state, 'loginForm'),
toRef(state, 'loginValdn'),
);
const signIn = () => {
if (schema.validate()) {
console.log('validated data =', state.loginForm);
}
};
Basic Forms
Email:
{{ state.loginValdn.email }}
Password:
{{ state.loginValdn.password }}
Sign in
{{ state.loginForm }}
{{ state.loginValdn }}
.flex {
display: flex;
}
.gap-2 {
gap: 0.5rem;
}
.text-red-500 {
--un-text-opacity: 1;
color: rgba(239, 68, 68, var(--un-text-opacity));
}
```
## Documentation
To learn more about `vue-formor`, check [its documentation](https://vitesheet.onrender.com/vue-formor/).
## Examples
See [./examples](./examples).
## Playground
- [ValibotForm](https://play.vuejs.org/#eNqlVm1v2zYQ/iuEv1gebMltkKHzHC/rkAEdhq1Iin3Sh8rSWWZCkRpJyQ4M/fcdj5LMekW6tUBii3cPn3vuhbROk5/rOm4bmKwma5NrXlsmMlnepBNr0gkzYJt6k0pe1Upb9lcm+FbZX5Wu2E6rik3jJLA5oumPqVwnngo34sJCVYvMAq4YW4cUCZrWSeCfzCc+0qLK6vjRKIm6Tm5f2jtQ1IqRxdkw3mKHTEo7czrZW1ubVZIcDoe4kfVTGeeqSs6o2+t4GS+TghsbWDFQOpmPnF7gi4QecruMr5DQ03FZwJGYHFGXyg6TsSZXcsfLi1SQo+YC9J+15Up+mlImhDr8RjarGxhl5XvInz5jfzRHL/W9BgO6hSAVm+kS+kzuHv6AIz6PzkoVjUD0C857MEo0TqOHvW1kgbIDHKl9R53hsvxg7o4WpBmSckKpGoSndv3yQupnuVfxVVDFiwn7b6N6Yhqy3PIW5syqe9ixrh/ZfkhHXGPgAatbZSGiH40A+B3LDGsHhJfk3AiQFvQuy4G9zQzPnU7js0JSLn5aMWM1lgfBjNWZMQeli9CKeaYSJ8VYtOFJYDej+Ih4hCq5dLxYrc7pOAei0pIfy1TIAXAPOQZZP8Gz2oXoPugGt3UzUu/jVqY0GJaiafi74RqKFfv4Yc8Nw79sNLIdB1F8pLCU3oCqGqTZAkJdcQrv9LiKo64LFDYPMnx+w/J9pjFZ0Mahu0CU8W25ObcocnRtrLaPkFtfm1FGG8tGCG72URvXvAb88slGszk6UcTvIEu7j17NKd14SIncRBKRnR5naJ1OZ/2kD10Lo3iPk/P/o53db3o3WjDkwDmd9o/e1PkvmuOIRgTFjUPRq/yMl0aC3GGvDS/lO4lljWbsZuN7zncs8uWOqX1IEs1mw9l0+5SAGEkjmn3nLxh+Ynembqhw7bxekAvmT+8XfgxolvDg0grXAkqQxYbmldHArpPe5nYTxh3MHo+rgrcsF9gdvAZ2Ao6szOrF63QyIhxrtgWxuaMpQT5aBW4u68aydoF3HgikuUjGjwNeMPa5BnQPS/fjNXKEMixepQts9OJ6uUQhp1NYHuqIp2Rdt8bfjvacTL/6iuTeD/P5FfkNs31OMbB8S5YDzZcT3TbWKjmE9ysMfpsLnj85yTSxGOYBHxjHmfKYYW6Sfij6Za3hQhC9bjgZzvUCjoQHQOI+D+knLyu4NPZZAF5TqgY3oTE1ic4MvhMg7nnFnGm44mPqnwfg44ot42sN1egOa+pRi0UjF2RWdZZzi4Sv6HDlSii9YrrcZtHrqx/m7Hu8SNx/m+noX7tm7kRiDDyLTrF70+r+ATIbVKQ=)