vuito
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

    vuito

    Simple, lightweight, isomorphic, and template-based validation library.

    Maintainability Test Coverage


    Installation Usage Vue.js Mixin Template Reuse


    Installation

    npm i vuito

    Or via JsDeliver, UNPKG, or bundle.run.

    Usage

    Imports

    CJS

    const { regex, required } = require('vuito');
    // OR
    const regex = require('vuito/validators/regex.cjs');

    Vuito is fully tree-shakable, so you can import only the methods you need.

    ES6

    import { regex, required } from 'vuito';

    Directly in the browser

    import { regex, required } from 'https://esm.run/vuito';

    Templates

    With templates you can easily create and reuse validations.

    validations/auth.ts:

    import { Template, required, minLength, maxLength } from 'vuito';
    
    export const signIn = new Template({
      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:

    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

    minizipped size

    Use vuito with Vue.js or Nuxt.js like a breeze!

    Nuxt.js Demo

    npm i @vuito/vue

    pages/signin.vue:

    <template>
      <span>{{ errors.username }}</span>
      <input type="text" id="username"
        :class="{error: !!errors.username}"
        v-model="fields.username" @input.capture="onInput"
      >
    
      <span>{{ errors.password }}</span>
      <input type="password" id="password"
        :class="{error: !!errors.password}"
        v-model="fields.password" @input.capture="onInput"
      >
    </template>
    
    <script>
    import { signIn } from '~/validations/auth';
    import Vuito from '@vuito/vue';
    
    export default {
      mixins: [Vuito(signIn)]
    }
    </script>

    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 let you share a js/ts file between projects.
    4. Maybe SWAP would be a good option to you

    Install

    npm i vuito

    DownloadsWeekly Downloads

    34

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    105 kB

    Total Files

    53

    Last publish

    Collaborators

    • mathix420