@ilingo/vuelidate

@ilingo/vuelidate

A Vuelidate message adapter for ilingo: drop-in localized validator messages (EN / DE / FR / ES) for Vue 3 forms.

Table of Contents

• Installation
• Usage
• License

Installation

npm install @ilingo/vuelidate --save

Usage

import { install } from '@ilingo/vuelidate';
import { createApp } from 'vue';

const app = createApp(/* */);
install(app);
app.mount('#app');

install(app) registers the built-in EN / DE / FR / ES validator-message catalog (the vuelidate namespace) on the app's Ilingo instance, via the eager store. If you manage the instance yourself, register a catalog store directly. Ilingo.registerStore dedupes by the store's STORE_ID (Symbol.for('@ilingo/vuelidate')), so it's idempotent:

import { Ilingo } from 'ilingo';
import { createMemoryStore } from '@ilingo/vuelidate/store/memory';

const ilingo = new Ilingo();
ilingo.registerStore(createMemoryStore()); // eager; install(app) does the same

For per-locale code-splitting, use the lazy loader store instead (each locale is fetched on demand via dynamic import()):

import { createLoaderStore } from '@ilingo/vuelidate/store/loader';

ilingo.registerStore(createLoaderStore());

The vuelidate namespace is a shared key-space: register your own store first to override individual validator messages while this catalog supplies the defaults.

First render (SSR)

The message record is resolved through a computedAsync, and it is seeded synchronously when the catalog can answer without I/O (the eager createMemoryStore() case). So validator messages are present on the first render instead of a tick later, and a server-rendered form hydrates without a text mismatch (#988).

A rule with no catalog entry still seeds, using the rule name, which is exactly what the async pass falls back to. The seed is only abandoned when a store would need I/O (a createLoaderStore() locale that hasn't loaded), where a fallback now would be contradicted a tick later.

<script setup>
    import { IVuelidate } from '@ilingo/vuelidate';
    import useVuelidate from '@vuelidate/core';
    import { minLength, maxLength } from '@vuelidate/validators';
    import { reactive } from 'vue';
    import { injectLocale } from '@ilingo/vue';

    const locale = injectLocale();
    const set = (value) => {
        locale.value = value;
    }

    const form = reactive({
        text: 'foo',
    });

    const v$ = useVuelidate({
        text: {
            minLength: minLength(5),
            maxLength: maxLength(10),
        },
    }, form);
</script>
<template>
    <div>
        <div>
            <input type="text" v-model="form.text" />
        </div>
        <div>
            <IVuelidate :validation="v$.text" />
        </div>
    </div>
    <button type="button" @click.prevent="set('en')">
        en
    </button>
    <button type="button" @click.prevent="set('de')">
        de
    </button>
</template>

License

Made with 💚

Published under MIT License.