{"id":20226326,"url":"https://github.com/mathix420/vuito","last_synced_at":"2025-07-08T08:33:43.020Z","repository":{"id":48706384,"uuid":"349751212","full_name":"mathix420/vuito","owner":"mathix420","description":"Simple, lightweight, isomorphic, template-based validation.","archived":false,"fork":false,"pushed_at":"2025-02-03T09:26:34.000Z","size":2680,"stargazers_count":4,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T14:50:28.481Z","etag":null,"topics":["frontend","full-stack","lightweight","server-side","template","validation"],"latest_commit_sha":null,"homepage":"https://vuito.vercel.app","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/mathix420.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2021-03-20T14:42:27.000Z","updated_at":"2024-11-04T13:45:33.000Z","dependencies_parsed_at":"2023-11-25T20:24:26.365Z","dependency_job_id":"d7fb25b4-5c56-48c1-b03e-8edce887fee5","html_url":"https://github.com/mathix420/vuito","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathix420%2Fvuito","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathix420%2Fvuito/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathix420%2Fvuito/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathix420%2Fvuito/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mathix420","download_url":"https://codeload.github.com/mathix420/vuito/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247968268,"owners_count":21025795,"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","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":["frontend","full-stack","lightweight","server-side","template","validation"],"created_at":"2024-11-14T07:17:29.799Z","updated_at":"2025-04-10T17:07:08.270Z","avatar_url":"https://github.com/mathix420.png","language":"TypeScript","funding_links":[],"categories":["Components \u0026 Libraries","UI Utilities [🔝](#readme)"],"sub_categories":["UI Utilities"],"readme":"# vuito\nSimple, lightweight, isomorphic, and template-based validation library.\n\n[![](https://badgen.net/bundlephobia/tree-shaking/vuito)](https://bundlephobia.com/result?p=vuito) ![](https://badgen.net/bundlephobia/dependency-count/vuito) [![](https://badgen.net/bundlephobia/minzip/vuito)](https://bundlephobia.com/result?p=vuito) [![Maintainability](https://api.codeclimate.com/v1/badges/42b1117477140c6613bb/maintainability)](https://codeclimate.com/github/mathix420/vuito/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/42b1117477140c6613bb/test_coverage)](https://codeclimate.com/github/mathix420/vuito/test_coverage)\n\n---\n\n⚡ [Installation](#installation) ⚡ [Usage](#usage) ⚡ [Vue.js Mixin](#vuejs-mixin) ⚡ [Template Reuse](#template-reuse) ⚡\n\n---\n\n# Installation\n\n```bash\nnpm i vuito\n```\nOr via [JsDeliver](https://www.jsdelivr.com/package/npm/vuito?version=latest), [UNPKG](https://unpkg.com/browse/vuito@latest/vuito.min.js), or [bundle.run](https://bundle.run/vuito@latest).\n\n# Usage\n\nFull documentation ➡️ https://vuito.vercel.app\n\n## Imports\n\n**CJS**\n```javascript\nconst { regex, required } = require('vuito');\n// OR\nconst regex = require('vuito/validators/regex.cjs');\n```\n\nVuito is fully tree-shakable, so you can import only methods you need.\n\n**ES6**\n```javascript\nimport { regex, required } from 'vuito';\n```\n\n**Directly in the browser**\n```javascript\nimport { regex, required } from 'https://esm.run/vuito';\n```\n\n## Templates\nWith templates, you can easily create and reuse validations.\n\n`validations/auth.ts`:\n```typescript\nimport { templateify, required, minLength, maxLength } from 'vuito';\n\nexport const signIn = templateify({\n  username: [\n    { test: required, message: 'Please enter a username.' },\n    { test: minLength(3), message: 'Username is too short.' },\n    { test: maxLength(20), message: 'Username is too big.' },\n  ],\n  password: [\n    { test: required, message: 'Please enter a password.' },\n    { test: minLength(12), message: 'Password is too short.' },\n  ]\n});\n```\n\n## Validate\n\n`index.ts`:\n```typescript\nimport { signIn } from './validations/auth';\n\nsignIn.check({\n  username: 'test123',\n  password: 'tooshort',\n})\n.then(() =\u003e console.log('Sign-in data is valid!'))\n.catch(console.error)\n\n// Result: console.error: Password is too short.\n```\n\n# Vue.js Mixin\n\n\u003e ⚠️ Only supporting Vue2 currently ⚠️\n\n[![minizipped size](https://badgen.net/bundlephobia/minzip/@vuito/vue)](https://bundlephobia.com/result?p=@vuito/vue)\n\nUse vuito with Vue.js or Nuxt.js like a breeze!\n\n\u003c!-- [Nuxt.js Demo](https://vuito.vercel.app/demo) --\u003e\n\n```bash\nnpm i @vuito/vue\n```\n`pages/signin.vue`:\n```html\n\u003ctemplate\u003e\n  \u003cspan\u003e{{ errors.username }}\u003c/span\u003e\n  \u003cinput type=\"text\" id=\"username\"\n    :class=\"{error: !!errors.username}\"\n    v-model=\"fields.username\" @input.capture=\"onInput\"\n  \u003e\n\n  \u003cspan\u003e{{ errors.password }}\u003c/span\u003e\n  \u003cinput type=\"password\" id=\"password\"\n    :class=\"{error: !!errors.password}\"\n    v-model=\"fields.password\" @input.capture=\"onInput\"\n  \u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { signIn } from '~/validations/auth';\nimport Vuito from '@vuito/vue';\n\nexport default {\n  mixins: [Vuito(signIn)]\n}\n\u003c/script\u003e\n```\n\n# Template Reuse\n\nTo reuse your validation template you have many solutions.\n\n1. Create a validation package in your monorepo.\n2. Create a private package in NPM, GitHub, GitLab, ...\n3. Any other solution that lets you share a js/ts file between projects.\n4. Maybe [SWAP](https://github.com/mathix420/swap) would be a good option for you.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathix420%2Fvuito","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathix420%2Fvuito","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathix420%2Fvuito/lists"}