@regle/nuxt

Regle

Regle \ʁɛɡl\ (French word for 'rule' ) is a headless model-based form validation library for Vue 3.

It's heavily inspired by Vuelidate and aims to replace it in modern apps.

Documentation

Play with it

Playground	Simple demo	Advanced Demo

AI Integration

MCP Server

Or add it manually to your .cursor/mcp.json or .mcp.json

{
  "mcpServers": {
    "regle": {
      "command": "npx",
      "args": ["@regle/mcp-server"]
    }
  }
}

Agent Skills

Install Agent Skills to give your AI coding agent Regle expertise:

npx skills add victorgarciaesgi/regle

Features

• Headless: Plug any UI or markup to the validation.
• Type safe: Full inference and autocompletion support.
• Model based: Your validation tree structure matches the data model.
• Devtools: Built-in Vue devtools extention for easy debugging and testing.
• MCP Server: MCP server for easy documentation and autocomplete.
• Agent Skills: Agent Skills for AI coding agents.
• Style Agnostic: Works with any CSS framework or plain CSS.
• Modular design: Expand Regle properties or default validation rules.
• Async validation: Handle asynchronous validations and pending states with ease.
• i18n Ready: Works with any i18n library.
• Vuelidate like API: Regle's API mimics Vuelidate's API while improving it on a lot of areas.
• ️ SSR Ready: Full support for Server Side Rendering environments.
• Alternative validation: Standard Schema spec validation support.
  • Zod
  • Valibot
  • ArkType

Devtools

Regle comes with a built-in Vue devtools extension for easy debugging and testing.

For more details, see the Devtools documentation.

Basic example

<template>
  <input v-model="r$.$value.email" :class="{ error: r$.email.$error }" placeholder="Type your email" />

  <ul>
    <li v-for="error of r$.email.$errors" :key="error">
      {{ error }}
    </li>
  </ul>
</template>

<script setup lang="ts">
  import { useRegle } from '@regle/core';
  import { required, minLength, email } from '@regle/rules';

  const { r$ } = useRegle(
    { email: '' },
    {
      email: { required, minLength: minLength(4), email },
    }
  );
</script>

Compatibility:

• Vue 3.3+
• Nuxt 3.1+
• Pinia 2.2.5+
• Standard Schemas
  • Zod 3.24+
  • Valibot 1.0+
  • Arktype 2.0.0+

Quick install

pnpm install @regle/core @regle/rules
# or
yarn add @regle/core @regle/rules
# or
npm install @regle/core @regle/rules

Credits

• Johannes Lacourly for designing logo and banners
• Martins Zeltins who helped me identify a lot of bugs, find new features and contributed to docs.
• Vuelidate Which I loved and used for 8 years, and is my main inspiration for creating Regle

License

MIT License