Usage with Pinia

As Regle is headless, you can use it in any place of your app, a composable, and also a store.

Using a Pinia store is great for avoiding to do prop drilling with all the properties, and easily keep type inference in your components.

Using regle in a Pinia store

demo.store.ts

import {required, minLength, email} from '@regle/rules';
import {defineStore} from 'pinia';
import {useRegle} from '@regle/core';

export const useDemoStore = defineStore('demo-store', () => {

  const regleProperties = useRegle({email: ''}, {
    email: {required, minLength: minLength(4), email}
  })

  // This is a proposed way to export the properties without redundant code
  // You can also export it one my one as each property is reactive
  return {
    ...regleProperties
  }
})

ComponentA.vue

<template>
  <input v-model='state.email' placeholder='Type your email'/>
  <button type="button" @click="demoStore.resetAll">Reset</button>
</template>

<script setup lang='ts'>
import {useDemoStore} from './demo.store';
import {storeToRefs} from 'pinia';

const demoStore = useDemoStore();
const {state} = storeToRefs(demoStore);

</script>

ComponentB.vue

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

<script setup lang='ts'>
import {useDemoStore} from './demo.store';
import {storeToRefs} from 'pinia';

const demoStore = useDemoStore();
const {errors} = storeToRefs(demoStore);

</script>

Component A:

Component B:

No errors