npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-tiny-validator

v0.0.2

Published

Tiny form validation tool for Vue 3

Downloads

82

Readme

Vue Tiny Validator

size coverage

Tiny validation library (<0.7K gzipped) without dependencies for Vue 3 that serves as building blocks. Inspired by vee-validate and vuetify's validation.

  • Non-intrusive in the way you build or style form components. It simply hooks the modelValue and gives you the error message to display.
  • Reset validation errors for a specific field or for the whole form.
  • Build your own rules as simple functions that return true or error message. You control everything, including i18n.
  • Supports asynchronous rules (e.g. checking if a field value already exists in DB).
  • Fully typed.

Installation

npm i vue-tiny-validator
# or
yarn add vue-tiny-validator

Usage

Parent component (form):

import { defineComponent, ref } from 'vue'
import { useForm } from 'vue-tiny-validator'

export default defineComponent({
  setup() {
    const myValue = ref('')
    const { validate, errors } = useForm()

    const submit = () => {
      if (validate()) {
        // Validated, submit form
        // ...
        return
      }

      console.warn('Form errors!', errors.value)
    }

    return { myValue, submit }
  },
})
<form @submit.prevent="submit">
  <MyInput v-model="myValue" />
  <button>Submit</button>
</form>

Child component (input):

import { defineComponent, watch } from 'vue'
import { useField } from 'vue-tiny-validator'

export default defineComponent({
  name: 'MyInput',
  props: {
    modelValue: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    // Rules return `true` on success or a string with an error message on failure.
    const isRequired = (v) => !!v || 'Required!'

    const { validate, error } = useField({
      value: () => props.modelValue,
      rules: [isRequired],
    })

    // Optionally validate it every time the model changes.
    // This could be debounced, or used in @blur event instead.
    watch(() => props.modelValue, validate)

    return { error }
  },
})
<label>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
  <span>{{ error }}</span>
</label>

See the example for more options.

Rules

Rules are simple functions that return true on success or an error message on failure. Examples:

const isRequired = (v) => !!v || 'Required'
const minLength = (v) => v?.length >= 3 || 'Min length 3'
const positiveNumber = (v) => v >= 1 || 'Only positive numbers'
const pattern = (v) => /^[a-z0-9_#]+$/i.test(v) || t('form.invalidPattern') // using vue-i18n

Async rules

Rules can also be asynchronous:

const isUnique = async (v) => {
  const response = await fetch(`/api/is-unique/${v}`)
  // Assuming API returns non-200 code when not unique
  return response.ok || 'Already in use'
}

In this case, you'll need to use validateAsync instead of validate:

const { validateAsync } = useForm()

const submit = async () => {
  if (await validateAsync()) {
    // valid, submit
  }

  // invalid
}