arv-validate-vue

Official reactive Vue 3 adapter for arv-validate using the Composition API (<script setup>).

English | Español

Installation

npm install arv-validate arv-validate-vue

Quick Start

<script setup>
import { useValidator, required, email, minLength, trim } from 'arv-validate-vue'

const v = useValidator(
  {
    username: '',
    email: ''
  },
  {
    username: [required(), minLength(3), trim()],
    email: [required(), email(), trim()]
  }
)

const onSubmit = async () => {
  const isValid = await v.validate()
  if (!isValid) return

  // Clean, sanitized data ready for backend API
  const payload = v.getPayload()
  await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  })
}
</script>

<template>
  <form @submit.prevent="onSubmit" class="form">
    <div class="form-group">
      <label for="username">Username</label>
      <input
        id="username"
        v-model="v.values.username"
        @blur="v.touch('username')"
        :class="{ 'is-invalid': v.hasError('username') }"
      />
      <span v-if="v.hasError('username')" class="error-text">
        {{ v.getError('username') }}
      </span>
    </div>

    <div class="form-group">
      <label for="email">Email</label>
      <input
        id="email"
        type="email"
        v-model="v.values.email"
        @blur="v.touch('email')"
        :class="{ 'is-invalid': v.hasError('email') }"
      />
      <span v-if="v.hasError('email')" class="error-text">
        {{ v.getError('email') }}
      </span>
    </div>

    <button type="submit" :disabled="!v.isValid">
      Submit
    </button>
  </form>
</template>

Key Features

• 🔄 Native Vue 3 Reactivity: Built directly on Vue 3's reactive and computed primitives.
• ⚡ Live Real-Time Validation: Instant feedback as user types or on blur.
• 🧹 Automatic Cleanup: Automatically unregisters listeners on onUnmounted. No memory leaks.
• 📦 All-in-One Export: Re-exports all core rules, transformers, and i18n helpers. Just import from 'arv-validate-vue'.

Usage Outside Components (e.g. Pinia Stores)

In Vue components (<script setup>), cleanup is 100% automatic. When creating a validator outside of component lifecycles (like in a Pinia store or composable module), call v.dispose() to release subscriptions:

import { defineStore } from 'pinia'
import { useValidator, required, email } from 'arv-validate-vue'

export const useAuthStore = defineStore('auth', () => {
  const v = useValidator(
    { email: '', password: '' },
    {
      email: [required(), email()],
      password: [required()]
    }
  )

  const logout = () => {
    v.dispose() // Manually cleans up listeners on logout
  }

  return { v, logout }
})

API Reference (useValidator)

useValidator(initialData, schema, options) returns:

Documentation

• ⚡ Full Vue 3 Guide with 9 Examples (English)
• ⚡ Guía Completa para Vue 3 en Español
• 📋 Rules & Transformers Catalog (English)
• 📋 Catálogo de Reglas y Transformadores (Español)
• 📖 Core Agnostic Documentation

License

MIT © jccallo