{"id":21961872,"url":"https://github.com/trapcodeio/abolish-vue","last_synced_at":"2025-10-15T05:15:42.692Z","repository":{"id":57684776,"uuid":"472897711","full_name":"trapcodeio/abolish-vue","owner":"trapcodeio","description":"Abolish Helper functions for vue 3","archived":false,"fork":false,"pushed_at":"2024-09-08T08:57:33.000Z","size":66,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-21T15:49:10.309Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trapcodeio.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-22T18:53:46.000Z","updated_at":"2024-09-08T08:57:35.000Z","dependencies_parsed_at":"2024-09-08T10:15:29.702Z","dependency_job_id":null,"html_url":"https://github.com/trapcodeio/abolish-vue","commit_stats":{"total_commits":53,"total_committers":2,"mean_commits":26.5,"dds":0.2075471698113207,"last_synced_commit":"8c550ca2bdc0891609f6e08eadb538ae9368419c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/trapcodeio/abolish-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trapcodeio%2Fabolish-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trapcodeio%2Fabolish-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trapcodeio%2Fabolish-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trapcodeio%2Fabolish-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trapcodeio","download_url":"https://codeload.github.com/trapcodeio/abolish-vue/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trapcodeio%2Fabolish-vue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278510944,"owners_count":25999011,"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-10-05T02:00:06.059Z","response_time":54,"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":[],"created_at":"2024-11-29T10:19:28.211Z","updated_at":"2025-10-05T20:12:48.979Z","avatar_url":"https://github.com/trapcodeio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Abolish Vue\n\nA set of functions to make real time validation easier.\n\n## Menu\n\n  * [Installation](#installation)\n  * [Setup](#setup)\n  * [Functions](#functions)\n    * [vRef](#vref)\n    * [vReactive](#vreactive)\n    * [vRefAsArray](#vrefasarray)\n    * [vReactiveAsArray](#vreactiveasarray)\n    * [vRefExtended](#vrefextended)\n    * [rCheck](#rcheck)\n    * [rCheckOnly](#rcheckonly)\n    * [rTest](#rtest)\n    \n\n## Installation\nInstall `abolish` and this package.\n```shell\nnpm i --save abolish abolish-vue\n# OR\nyarn add abolish abolish-vue\n```\n\n## Setup\nThis setup is only required if you want to provide a custom `abolish` instance or extend validators\n\n```js\nimport {AbolishPlugin} from 'abolish-vue';\nimport {Abolish} from 'abolish';\n\napp.use(AbolishPlugin, {\n  init(){\n      // add custom validators E.g\n      Abolish.addValidator('custom', validator);\n  },\n  abolish(){\n      // return custom abolish instance E.g\n      return new Abolish()\n  }\n});\n```\nTo get options types for typescript\n\n```ts\napp.use(AbolishPlugin, \u003cAbolishPlugin\u003e{\n    // options here will be typed\n});\n```\n## Functions    \n\n### vRef\n`vRef` stands for \"validated Ref\". This function creates a ref that is watched and validated\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cinput v-model=\"name\" /\u003e\n    \u003cspan\u003e{{ nameError }}\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport {vRef} from \"abolish-vue\"; \n\nconst {\n  original: name, \n  error: nameError\n} = vRef(\"John Doe\", \"string:trim|min:2|max:10\");\n\n// `original` is the value being validated\n// `error` is the error message\n\u003c/script\u003e\n```\n\n### vReactive\n`vReactive` stands for \"validated Reactive\". This function creates a reactive object that is watched and validated.\n\n\n```vue\n\u003cscript setup\u003e\nimport {vReactive} from \"abolish-vue\"; \n\nconst {\n  original: form, \n  error: formError,\n  validated: validatedForm\n} = vReactive({\n    name: \"John Doe\", \n    email: \"SomeMail@example.com\",\n}, {\n    name: 'required|string:trim|min:2|max:10',\n    email: 'required|string:trim|email',\n});\n\n// `original` is the value being validated\n// `error` is the error message\n// `validated` is the validated object\n\u003c/script\u003e\n```\n\n### vRefAsArray\n`vRefAsArray` stands for \"validated Ref as Array\". Has the same functionality as `vRef` but returns an array of refs.\n\n```vue\n\u003cscript setup\u003e\nimport {vRefAsArray} from \"abolish-vue\"; \n\nconst [email, emailError] = vRefAsArray(\"John Doe\", \"string:trim|min:2|max:10\");\n\n// `0` is the value being validated\n// `1` is the error message\n\u003c/script\u003e\n```\n\n\n### vReactiveAsArray\n`vReactiveAsArray` stands for \"validated Reactive as Array\". Has the same functionality as `vReactive` but returns an array of refs.\n\n```vue\n\u003cscript setup\u003e\nimport {vReactiveAsArray} from \"abolish-vue\"; \n\nconst [form, formError, validatedForm] = vReactiveAsArray({\n    name: \"John Doe\", \n   email: \"SomeMail@example.com\",\n}, {\n  name: \"required|string:trim|min:2|max:10\",\n  email: \"required|email\"\n});\n\n// `0` is the value being validated\n// `1` is the error message\n// `2` is the validated object\n\u003c/script\u003e\n```\n\n\n### vRefExtended\n\n`vRefExtended` is the same as `vRef` but uses **vueuse** [extendRef](https://vueuse.org/shared/extendRef/) to extend the validating ref variable.\n\n```vue\n\u003cscript setup\u003e\nimport {vRefExtended} from \"abolish-vue\"; \n\nconst name = vRefExtended(\" John Doe \", \"string:trim|min:2|max:10\")\n\nname.value // \" John Doe \"\nname.error // \"Validation error\"\nname.validated // Validated result i.e \"John Doe\"\n\u003c/script\u003e\n```\n\nThe downside of using `vRefExtended` is: `error` and `validated` cannot be used in `\u003ctemplate\u003e` tag.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cinput v-model=\"name\" /\u003e\n    \u003c!-- This will not work 🚫  --\u003e\n    \u003cspan\u003e{{ name.error }}\u003c/span\u003e\n    \n    \u003c!-- This will not work also 🚫  --\u003e\n    \u003cspan\u003e{{ name.validated }}\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nTo access them in template, you have to create a computed property like so:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cinput v-model=\"name\" /\u003e\n    \u003c!-- These should work and reactive ✅  --\u003e\n    \u003cspan\u003e{{ nameError }}\u003c/span\u003e\n    \n    \u003c!-- This will also work ✅  --\u003e\n    \u003cspan\u003e{{ validatedName }}\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport {vRefExtended} from \"abolish-vue\"; \nimport {computed} from 'vue'; \n\nconst name = vRefExtended(\" John Doe \", \"string:trim|min:2|max:10\")\n\n// This will work ✅\nconst nameError = computed(() =\u003e name.error);\nconst validatedName = computed(() =\u003e name.validated);\n\u003c/script\u003e\n```\n\n### rCheck\n`rCheck` stands for \"reactive/realtime check\". it converts `Abolish.check()` to a reactive realtime validation function.\n\nUnlike `vRef` and `vReactive`, `rCheck` takes an already declared `ref` or a function and validates its value\n\n```ts\nimport {ref} from \"vue\";\nimport {rCheck} from \"abolish-vue\"; \n\nconst name = ref('what to validate on any change.');\nconst [error, validated] = rCheck(name, rules);\n\n// `0` i.e `error` is the error message\n// `1` i.e `validated` is the validated object\n\n// OR using a function\nconst firstName = ref('John');\nconst lastName = ref('Doe');\n\nconst [ageError, validatedAge] = rCheck(() =\u003e {\n    // because firstName and lastName used and reactive, \n    // this function will be called any time either of them changes\n    return firstName.value + ' ' + lastName.value;\n}, \"string:trim|min:2|max:10\");\n```\n\n\n### rCheckOnly\n`rCheckOnly` stands for \"reactive/realtime check only\". It is the same as `rCheck` but does not return the validated object.\nThis can improve performance when you are only interested in the error message.\n\n```ts\nimport {ref} from \"vue\";\nimport {rCheckOnly} from \"abolish-vue\"; \n\nconst name = ref('what to validate on any change.');\nconst error = rCheckOnly(name, rules);\n\n// `error` is the error message is returned\n\n// OR using a function\nconst firstName = ref('John');\nconst lastName = ref('Doe');\n\nconst ageError = rCheckOnly(() =\u003e {\n    // because firstName and lastName used and reactive, \n    // this function will be called any time either of them changes\n    return firstName.value + ' ' + lastName.value;\n}, \"string:trim|min:2|max:10\");\n\n```\n\n\n### rTest\n`rTest` stands for \"reactive/realtime test\". it converts `Abolish.test()` to a reactive realtime validation function.\n\n\n`rTest` just like `Abolish.test()` takes a value and a rule and returns a boolean.\n\n```ts\nimport {ref} from \"vue\";\nimport {rTest} from \"abolish-vue\"; \n\nconst variable = ref('what to validate on any change.');\nconst isValid = rTest(variable, rules);\n\nisValid.value // true or false\n\n// OR using a function\nconst firstName = ref('John');\nconst lastName = ref('Doe');\n\nconst isValidAge = rTest(() =\u003e {\n    // because firstName and lastName used and reactive, \n    // this function will be called any time either of them changes\n    return firstName.value + ' ' + lastName.value;\n}, \"string:trim|min:2|max:10\");\n\nisValidAge.value // true or false\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrapcodeio%2Fabolish-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrapcodeio%2Fabolish-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrapcodeio%2Fabolish-vue/lists"}