https://github.com/daleal/loveform
The Vue form assembly tool that won't break your heart 💔
https://github.com/daleal/loveform
form forms typescript validation validations vue vue3 vuejs
Last synced: 5 months ago
JSON representation
The Vue form assembly tool that won't break your heart 💔
- Host: GitHub
- URL: https://github.com/daleal/loveform
- Owner: daleal
- License: mit
- Created: 2022-04-18T19:16:17.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-09T19:54:25.000Z (over 3 years ago)
- Last Synced: 2025-08-09T10:35:57.882Z (6 months ago)
- Topics: form, forms, typescript, validation, validations, vue, vue3, vuejs
- Language: TypeScript
- Homepage: https://loveform.daleal.dev
- Size: 287 KB
- Stars: 17
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Loveform
The Vue form assembly tool that won't break your heart 💔
**Loveform** is a tool that helps you build validated forms in Vue 3 without the need to handle the whole validation process yourself. This means that you no longer need to write a `submit` function with a huge `if` - `else if` - `else` chain of conditionals and a whole bunch of error variables. Just import the component you need to use, write a validation function and _voilà _! Your form is _production ready_!
## Why Loveform?
When building forms, you can choose between using no library _at all_, using one of the libraries that include form validation handling as a secondary _feature_ (like [Vuetify](https://vuetifyjs.com/en)) or using **Loveform**.
If you decide to use no library _at all_, you will soon find yourself with a ton of variables holding errors for different inputs, large validations that include tons of `if` statements and a huge template to tie it all together. Soon enough, you will start writing your own form assembly solution (**just as I did**), wasting valuable time that could be better used writing code that will **actually improve your business/project**.
If you decide to use a library that includes form validation handling as a secondary _feature_ (like [Vuetify](https://vuetifyjs.com/en)), you will probably have a **Very hard time** customizing how your forms look like. These libraries **almost always include default styling** and other _features_ that you probably don't want nor need.
If you decide to use **Loveform**, you will have the power to write fully validatable forms **without having to worry about the validation chain**, while being able to **fully style your components** however you desire 😈.
The [complete documentation](https://loveform.daleal.dev/docs/) is available on the [official website](https://loveform.daleal.dev/).
## Installation
Install using npm! (or your favourite package manager)
```sh
# Using npm
npm install loveform
# Using yarn
yarn add loveform
```
Please note that **Loveform** will only work with **Vue 3**.
## Basic Usage
The basic principle is simple: write a form as you would write an ordinary form with no validations, add some validations to the fields you want to validate and then **forget about validations and focus on the rest of your application**. Here's an example of an (_unstyled_) validated form:
```vue
import { ref } from 'vue';
import axios from 'axios';
import { LForm, LInput } from 'loveform';
const email = ref('');
const password = ref('');
const emailValidations = [
(content: string) => !!content.trim() || 'The \'email\' field is required',
(content: string) => content.includes('@') || 'Invalid email',
];
const passwordValidations = [
(content: string) => content.length >= 6 || 'The password needs at least 6 characters',
(content: string) => !content.includes('&') || 'The password can\'t include the \'&\' character',
];
const submit = async () => {
// This will only run if the validations pass
await axios.post('https://backend.you/signup', {
email: email.value,
password: password.value,
});
};
Submit!
```
Each validation corresponds to a function that receives the value in the input and returns `true` (if the value of the input is correct) or an error string. Each validation will be run _sequentially_ from the first validation of the array to the last one, and the first validation to fail will be displayed as the error.
## Available Components
The available components are listed below:
- `LForm`: The form wrapper that validates inputs when trying to submit.
- `LInput`: A validatable `input` component.
- `LTextarea`: A validatable `textarea` component.
- `LCheckbox`: A `checkbox` type `input` component that plays nicely with the `LCheckboxGroup` component.
- `LCheckboxGroup`: A validatable group of `LCheckbox` components.
## Development
### Testing locally
To test locally, first link the library:
```sh
npm link
```
Then `cd` into the `dev` folder and copy the `LPlayground.template.vue` into a `LPlayground.vue` file:
```sh
cd dev
cp src/LPlayground.template.vue src/LPlayground.vue
```
Now, edit the `LPlayground.vue` file _risk free_ to try the components you're working on:
```sh
nano src/LPlayground.vue # or your favorite editor
```
Finally, run `npm install` and start the playground server!
```sh
npm install
npm run dev
```
You can see the development server running at `http://localhost:3000`.
## Resources
- [Official Website](https://loveform.daleal.dev/)
- [Issue Tracker](https://github.com/daleal/loveform/issues/)