Vue

The Vue adapter works best when you choose one of two styles: DOM-driven v-validate directives for quick forms, or an imperative validator instance that you wrap in your own Vue reactivity.

Register the plugin

import { createApp } from 'vue';
import { VueValidationPlugin } from 'laravel-client-validation/vue';
import App from './App.vue';

const app = createApp(App);

app.use(VueValidationPlugin, {
    debounce: 300,
    validClass: 'border-green-500',
    invalidClass: 'border-red-500',
});

app.mount('#app');

These options apply to everything the plugin provides, including the v-validate directive. They override the window-level clientValidationConfig for this app, so multiple Vue apps on one page can use different styling or debounce values.

Use the directive in a component

<template>
    <form @submit.prevent="submit">
        <input v-model="form.email" v-validate.live="'required|email'" name="email">
        <span class="validation-error" data-error="email"></span>

        <input v-model="form.password" v-validate="'required|min:8'" type="password" name="password">
        <span class="validation-error" data-error="password"></span>
    </form>
</template>

<script setup>
import { reactive } from 'vue';

const form = reactive({
    email: '',
    password: '',
});

function submit() {
    // Let the validator update the DOM before posting the form.
}
</script>

The directive updates classes and nearby error containers directly, so it is a good fit when you want package-managed DOM feedback with minimal component code.

Use an imperative validator with your own state

import { createVueValidator } from 'laravel-client-validation/vue';

const validator = createVueValidator({
    rules: {
        email: 'required|email',
        password: 'required|min:8',
    },
});

const result = await validator.validateAll({
    email: form.email,
    password: form.password,
});

Wrap getError(), hasError(), and getAllErrors() in your own refs or computed properties when you want Vue-controlled error rendering instead of DOM updates.

Using with Inertia

The Vue adapter works unchanged inside Inertia pages. Register the plugin once during app bootstrap, then use v-validate or createVueValidator() in page components exactly as shown above. State stays with the Inertia page, so no extra adapter is required. The directive reads sibling values from the rendered DOM as usual:

import { VueValidationPlugin } from 'laravel-client-validation/vue';

// app.js. This is identical for standalone apps and Inertia apps.
app.use(VueValidationPlugin);

Related pages

• Use inertia when the Vue form lives inside an Inertia page.
• Open vanilla for DOM-first validation outside Vue.
• Keep examples nearby for compact snippets.