Skip to main content
Vuetify0 is now in alpha!
Vuetify0 Logo
Theme
Mode
Palettes
Accessibility
Vuetify One
Sign in to Vuetify One

Access premium tools across the Vuetify ecosystem — Bin, Play, Studio, and more.

Not a subscriber? See what's included

useRules

Edit this page
Report a Bug
Open issues
View on GitHub
Copy Markdown
IntermediateApr 5, 2026

Validation rule management with Standard Schema support and custom aliases.

Installation

Register the plugin with your app-wide aliases:

main.ts
import { createApp } from 'vue'
import { createRulesPlugin } from '@vuetify/v0'
import App from './App.vue'

const app = createApp(App)

app.use(
  createRulesPlugin({
    aliases: {
      required: v => (v === 0 || !!v) || 'Required',
      email: v => !v || /^.+@\S+\.\S+$/.test(String(v)) || 'Invalid email',
      slug: v => !v || /^[a-z][a-z0-9-]*$/.test(String(v)) || 'Invalid slug',
    },
  })
)

app.mount('#app')
Tip

Return false instead of a string to defer the error message to the locale plugin. When useLocale is installed, false resolves to locale.t('$rules.<aliasName>'). Without locale, it falls back to the alias name.

Usage

In a Component

createValidation resolves aliases automatically via useRules() — no manual wiring needed:

vue
<script setup lang="ts">
  import { createValidation } from '@vuetify/v0'
  import { shallowRef } from 'vue'

  const name = shallowRef('')
  const validation = createValidation({
    value: name,
    rules: ['required', 'slug'],
  })
</script>

Standalone

createRules works without a plugin for use outside component scope:

ts
import { createRules } from '@vuetify/v0'

const rules = createRules({
  aliases: {
    required: v => !!v || 'Required',
  },
})

rules.resolve(['required'])

Custom Aliases

An alias is a predicate — a FormValidationRule that returns true, a string, or false:

ts
app.use(
  createRulesPlugin({
    aliases: {
      // String return — inline error message
      required: v => !!v || 'This field is required',

      // String return — domain-specific
      slug: v => !v || /^[a-z][a-z0-9-]*$/.test(String(v)) || 'Invalid slug',

      // false return — defers to locale plugin for message
      email: v => !v || /^.+@\S+\.\S+$/.test(String(v)) || false,
    },
  })
)

Architecture

useRules resolves aliases, functions, and Standard Schema objects into FormValidationRule[] for use with createValidation:

Rules Architecture

Use controls to zoom and pan. Click outside or press Escape to close.

Rules Architecture

Reactivity

useRules has no reactive state. Aliases are plain predicate functions — resolve() wraps them with locale-aware error message lookup when they return false.

PropertyReactiveNotes
aliasesStatic map of predicate functions
resolve()Pure function, returns array of rule functions

Examples

API Key Manager

This example registers 4 custom aliases (required, email, slug, prefix) as predicates with inline error strings. Each input gets its own createValidation instance with a value ref and rules. A rate limit field uses an inline function rule to show that aliases and functions can coexist.

The controls let you trigger validation, prefill valid or invalid data, and reset. The state panel reflects each validation’s isValid, error count, and active rule count in real time — showing the tri-state validation lifecycle (null → true/false) and how reset returns everything to its initial state.

FileRole
context.tsDefines predicate aliases via createRulesContext
FormField.vueReusable field component — binds validation errors and border state
dashboard.vueProvides rules context, creates per-input validations, renders UI

Key patterns:

  • createRulesContext({ aliases }) registers predicate validators

  • true = pass, string = fail with message, false = fail with locale lookup

  • createValidation({ value, rules }) — one instance per input, resolves aliases via useRules()

  • Validation state (errors, isValid, isValidating) lives on the context, not on individual tickets

  • Components decide when to call validate() — validation triggers are a UI concern

 

 

 

 

Validation State

Key Name

valid: null

errors: 0

rules: 2/2

Owner Email

valid: null

errors: 0

rules: 2/2

Rate Limit (req/s)

valid: null

errors: 0

rules: 2/2

Prefix

valid: null

errors: 0

rules: 2/2

aggregate isValid: null

fields: 4

Standard Schema

useRules supports Standard Schema↗ — a universal interface for validation libraries. Pass schema objects directly in rules arrays alongside alias strings and inline functions — resolve() auto-detects and wraps them.

Zod

vue
<script setup lang="ts">
  import { z } from 'zod'
  import { createValidation } from '@vuetify/v0'
  import { shallowRef } from 'vue'

  const email = shallowRef('')
  const emailValidation = createValidation({
    value: email,
    rules: ['required', z.string().email('Invalid email')],
  })

  const age = shallowRef('')
  const ageValidation = createValidation({
    value: age,
    rules: [z.coerce.number().int().min(18, 'Must be 18+').max(120)],
  })
</script>

Valibot

vue
<script setup lang="ts">
  import * as v from 'valibot'
  import { createValidation } from '@vuetify/v0'
  import { shallowRef } from 'vue'

  const username = shallowRef('')
  const validation = createValidation({
    value: username,
    rules: ['required', v.pipe(v.string(), v.minLength(3), v.maxLength(20))],
  })
</script>

ArkType

vue
<script setup lang="ts">
  import { type } from 'arktype'
  import { createValidation } from '@vuetify/v0'
  import { shallowRef } from 'vue'

  const score = shallowRef('')
  const validation = createValidation({
    value: score,
    rules: [type('1 <= number <= 100')],
  })
</script>
Tip

Schema objects produce async rules. createValidation handles this transparently — no special handling needed in components.

Compatible Libraries

Any library that implements the Standard Schema v1 spec↗ works out of the box:

LibraryVersionImport
Zod↗v3.24+import { z } from 'zod'
Valibot↗v1.0+import * as v from 'valibot'
ArkType↗v2.0+import { type } from 'arktype'

isStandardSchema()

isStandardSchema(value) is exported for use in custom rule factories. Returns true if the value implements the Standard Schema v1 interface (~standard.version === 1):

ts
import { isStandardSchema } from '@vuetify/v0'

function myRuleFactory (input: unknown) {
  if (isStandardSchema(input)) {
    // wrap as standard schema rule
  }
}

API Reference

The following API details are for the useRules composable.

Functions

createRules

(_options?: RulesOptions) => RulesContext

Creates a new rules instance.

createRulesFallback

() => RulesContext

Creates a fallback rules instance for use outside component scope. No locale lookup — `false` returns fall back to the alias name.

isStandardSchema

typeof isStandardSchema

createRulesContext

<_E>(_options?: RulesContextOptions | undefined) => ContextTrinity<_E>

createRulesPlugin

(_options?: RulesContextOptions | undefined) => Plugin

useRules

<_E>(namespace?: string) => _E

Options

aliases

Partial<RuleAliases> | undefined

Custom aliases to register. Each alias is a predicate (FormValidationRule).

Properties

aliases

RuleAliases

The alias map (custom aliases registered via options).

Methods

resolve

(rules: RuleInput[]) => FormValidationRule[]

Resolve aliases, functions, and Standard Schema objects to FormValidationRule[].

Was this page helpful?
© 2016-1970 Vuetify, LLC
Ctrl+/