{"id":30950998,"url":"https://github.com/daleal/loveform","last_synced_at":"2025-09-11T05:28:39.311Z","repository":{"id":41841549,"uuid":"482967850","full_name":"daleal/loveform","owner":"daleal","description":"The Vue form assembly tool that won't break your heart 💔","archived":false,"fork":false,"pushed_at":"2022-07-09T19:54:25.000Z","size":294,"stargazers_count":17,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-09T10:35:57.882Z","etag":null,"topics":["form","forms","typescript","validation","validations","vue","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://loveform.daleal.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daleal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-18T19:16:17.000Z","updated_at":"2025-04-09T16:26:34.000Z","dependencies_parsed_at":"2022-09-02T22:51:44.278Z","dependency_job_id":null,"html_url":"https://github.com/daleal/loveform","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/daleal/loveform","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daleal%2Floveform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daleal%2Floveform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daleal%2Floveform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daleal%2Floveform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daleal","download_url":"https://codeload.github.com/daleal/loveform/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daleal%2Floveform/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274582642,"owners_count":25311652,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-11T02:00:13.660Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","forms","typescript","validation","validations","vue","vue3","vuejs"],"created_at":"2025-09-11T05:27:30.702Z","updated_at":"2025-09-11T05:28:39.306Z","avatar_url":"https://github.com/daleal.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/daleal/loveform\"\u003e\n    \u003cimg src=\"https://loveform.daleal.dev/assets/images/loveform-300x300.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eLoveform\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cem\u003e\n    The Vue form assembly tool that \u003cstrong\u003ewon't break your heart\u003c/strong\u003e 💔\n  \u003c/em\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/loveform\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/loveform?label=version\u0026logo=nodedotjs\u0026logoColor=%23fff\u0026color=f92e61\" alt=\"NPM - Version\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/daleal/loveform/actions?query=workflow%3Alinters\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/workflow/status/daleal/loveform/linters?label=linters\u0026logo=github\" alt=\"Linters\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n**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_!\n\n## Why Loveform?\n\nWhen 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**.\n\nIf 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**.\n\nIf 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.\n\nIf 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 😈.\n\nThe [complete documentation](https://loveform.daleal.dev/docs/) is available on the [official website](https://loveform.daleal.dev/).\n\n## Installation\n\nInstall using npm! (or your favourite package manager)\n\n```sh\n# Using npm\nnpm install loveform\n\n# Using yarn\nyarn add loveform\n```\n\nPlease note that **Loveform** will only work with **Vue 3**.\n\n## Basic Usage\n\nThe 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:\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue';\nimport axios from 'axios';\nimport { LForm, LInput } from 'loveform';\n\nconst email = ref('');\nconst password = ref('');\n\nconst emailValidations = [\n  (content: string) =\u003e !!content.trim() || 'The \\'email\\' field is required',\n  (content: string) =\u003e content.includes('@') || 'Invalid email',\n];\nconst passwordValidations = [\n  (content: string) =\u003e content.length \u003e= 6 || 'The password needs at least 6 characters',\n  (content: string) =\u003e !content.includes('\u0026') || 'The password can\\'t include the \\'\u0026\\' character',\n];\n\nconst submit = async () =\u003e {\n  // This will only run if the validations pass\n  await axios.post('https://backend.you/signup', {\n    email: email.value,\n    password: password.value,\n  });\n};\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cLForm @submit=\"submit\"\u003e\n    \u003cLInput\n      v-model=\"email\"\n      :validations=\"emailValidations\"\n    /\u003e\n    \u003cLInput\n      v-model=\"password\"\n      :validations=\"passwordValidations\"\n    /\u003e\n    \u003cbutton type=\"submit\"\u003eSubmit!\u003c/button\u003e\n  \u003c/LForm\u003e\n\u003c/template\u003e\n```\n\nEach 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.\n\n## Available Components\n\nThe available components are listed below:\n\n- `LForm`: The form wrapper that validates inputs when trying to submit.\n- `LInput`: A validatable `input` component.\n- `LTextarea`: A validatable `textarea` component.\n- `LCheckbox`: A `checkbox` type `input` component that plays nicely with the `LCheckboxGroup` component.\n- `LCheckboxGroup`: A validatable group of `LCheckbox` components.\n\n## Development\n\n### Testing locally\n\nTo test locally, first link the library:\n\n```sh\nnpm link\n```\n\nThen `cd` into the `dev` folder and copy the `LPlayground.template.vue` into a `LPlayground.vue` file:\n\n```sh\ncd dev\ncp src/LPlayground.template.vue src/LPlayground.vue\n```\n\nNow, edit the `LPlayground.vue` file _risk free_ to try the components you're working on:\n\n```sh\nnano src/LPlayground.vue  # or your favorite editor\n```\n\nFinally, run `npm install` and start the playground server!\n\n```sh\nnpm install\nnpm run dev\n```\n\nYou can see the development server running at `http://localhost:3000`.\n\n## Resources\n\n- [Official Website](https://loveform.daleal.dev/)\n- [Issue Tracker](https://github.com/daleal/loveform/issues/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaleal%2Floveform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaleal%2Floveform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaleal%2Floveform/lists"}