Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mathix420/vuito
Simple, lightweight, isomorphic, template-based validation.
https://github.com/mathix420/vuito
frontend full-stack lightweight server-side template validation
Last synced: 3 days ago
JSON representation
Simple, lightweight, isomorphic, template-based validation.
- Host: GitHub
- URL: https://github.com/mathix420/vuito
- Owner: mathix420
- License: mit
- Created: 2021-03-20T14:42:27.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-11-04T13:45:30.000Z (13 days ago)
- Last Synced: 2024-11-04T14:37:16.419Z (13 days ago)
- Topics: frontend, full-stack, lightweight, server-side, template, validation
- Language: TypeScript
- Homepage: https://vuito.vercel.app
- Size: 4.04 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vuito
Simple, lightweight, isomorphic, and template-based validation library.
[](https://bundlephobia.com/result?p=vuito)  [](https://bundlephobia.com/result?p=vuito) [](https://codeclimate.com/github/mathix420/vuito/maintainability) [](https://codeclimate.com/github/mathix420/vuito/test_coverage)
---
⚡ [Installation](#installation) ⚡ [Usage](#usage) ⚡ [Vue.js Mixin](#vuejs-mixin) ⚡ [Template Reuse](#template-reuse) ⚡
---
# Installation
```bash
npm i vuito
```
Or 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).
# Usage
Full documentation ➡️ https://vuito.vercel.app
## Imports
**CJS**
```javascript
const { regex, required } = require('vuito');
// OR
const regex = require('vuito/validators/regex.cjs');
```
Vuito is fully tree-shakable, so you can import only methods you need.
**ES6**
```javascript
import { regex, required } from 'vuito';
```
**Directly in the browser**
```javascript
import { regex, required } from 'https://esm.run/vuito';
```
## Templates
With templates, you can easily create and reuse validations.
`validations/auth.ts`:
```typescript
import { templateify, required, minLength, maxLength } from 'vuito';
export const signIn = templateify({
username: [
{ test: required, message: 'Please enter a username.' },
{ test: minLength(3), message: 'Username is too short.' },
{ test: maxLength(20), message: 'Username is too big.' },
],
password: [
{ test: required, message: 'Please enter a password.' },
{ test: minLength(12), message: 'Password is too short.' },
]
});
```
## Validate
`index.ts`:
```typescript
import { signIn } from './validations/auth';
signIn.check({
username: 'test123',
password: 'tooshort',
})
.then(() => console.log('Sign-in data is valid!'))
.catch(console.error)
// Result: console.error: Password is too short.
```
# Vue.js Mixin
> ⚠️ Only supporting Vue2 currently ⚠️
[](https://bundlephobia.com/result?p=@vuito/vue)
Use vuito with Vue.js or Nuxt.js like a breeze!
```bash
npm i @vuito/vue
```
`pages/signin.vue`:
```html
{{ errors.username }}
{{ errors.password }}
import { signIn } from '~/validations/auth';
import Vuito from '@vuito/vue';
export default {
mixins: [Vuito(signIn)]
}
```
# Template Reuse
To reuse your validation template you have many solutions.
1. Create a validation package in your monorepo.
2. Create a private package in NPM, GitHub, GitLab, ...
3. Any other solution that lets you share a js/ts file between projects.
4. Maybe [SWAP](https://github.com/mathix420/swap) would be a good option for you.