useRules
Headless validation composable that resolves rules from multiple sources — Standard Schema↗ objects, custom aliases, and raw functions — into FormValidationRule[] for use with createValidation. No built-in validators are included; bring your own via a schema library or register custom aliases at the plugin level.
A validation function returns one of three values:
true— validation passesstring— validation fails, the string is the error messagefalse— validation fails, the error message is resolved from the locale plugin ($rules.<name>)
Installation
Register the plugin with your app-wide aliases:
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') 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:
<script setup lang="ts">
import { createValidation } from '@vuetify/v0'
const validation = createValidation()
const name = validation.register({
id: 'name',
value: '',
rules: ['required', 'slug'],
})
</script>Standalone
createRules works without a plugin for use outside component scope:
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:
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,
},
})
)Adapters
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
<script setup lang="ts">
import { z } from 'zod'
import { createValidation } from '@vuetify/v0'
const validation = createValidation()
const email = validation.register({
id: 'email',
value: '',
rules: ['required', z.string().email('Invalid email')],
})
const age = validation.register({
id: 'age',
value: '',
rules: [z.coerce.number().int().min(18, 'Must be 18+').max(120)],
})
</script>Valibot
<script setup lang="ts">
import * as v from 'valibot'
import { createValidation } from '@vuetify/v0'
const validation = createValidation()
const username = validation.register({
id: 'username',
value: '',
rules: ['required', v.pipe(v.string(), v.minLength(3), v.maxLength(20))],
})
</script>ArkType
<script setup lang="ts">
import { type } from 'arktype'
import { createValidation } from '@vuetify/v0'
const validation = createValidation()
const score = validation.register({
id: 'score',
value: '',
rules: [type('1 <= number <= 100')],
})
</script> 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:
| Library | Version | Import |
|---|---|---|
| Zod↗ | v3.24+ | import { z } from 'zod' |
| Valibot↗ | v1.0+ | import * as v from 'valibot' |
| ArkType↗ | v2.0+ | import { type } from 'arktype' |
Examples
API Key Manager
This example registers 4 custom aliases (required, email, slug, prefix) as predicates with inline error strings, and wires them into createValidation. 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 field’s isValid, isPristine, and error count in real time — showing the tri-state validation lifecycle (null → true/false) and how reset returns everything to its initial state.
| File | Role |
|---|---|
context.ts | Defines predicate aliases via createRulesContext |
FormField.vue | Reusable field component — binds ticket value, errors, and border state |
dashboard.vue | Provides rules context, creates validation, registers fields, renders UI |
Key patterns:
createRulesContext({ aliases })registers predicate validatorstrue= pass,string= fail with message,false= fail with locale lookupcreateValidation()resolves aliases automatically viauseRules()Each ticket exposes
isValid,isPristine,errorsas reactive refsComponents decide when to call
validate()— validation triggers are a UI concern
Validation State
name
valid: null
pristine: true
errors: 0
valid: null
pristine: true
errors: 0
rate
valid: null
pristine: true
errors: 0
prefix
valid: null
pristine: true
errors: 0
aggregate isValid: null
fields: 4
Architecture
useRules resolves aliases, functions, and Standard Schema objects into FormValidationRule[] for use with createValidation:
Reactivity
useRules has no reactive state. Aliases are plain predicate functions — resolve() wraps them with locale-aware error message lookup when they return false.
| Property | Reactive | Notes |
|---|---|---|
aliases | Static map of predicate functions | |
resolve() | Pure function, returns array of rule functions |
Functions
createRulesFallback
() => RulesContextCreates a fallback rules instance for use outside component scope. No locale lookup — `false` returns fall back to the alias name.
isStandardSchema
typeof isStandardSchemacreateRulesContext
<_E>(_options?: RulesContextOptions | undefined) => ContextTrinity<_E>createRulesPlugin
(_options?: RulesContextOptions | undefined) => PluginuseRules
<_E>(namespace?: string) => _EOptions
aliases
Partial<RuleAliases> | undefinedCustom aliases to register. Each alias is a predicate (FormValidationRule).
Properties
Methods
resolve
(rules: RuleInput[]) => FormValidationRule[]Resolve aliases, functions, and Standard Schema objects to FormValidationRule[].