v1 LiVue v1 is here — server-driven reactivity for Laravel using Vue.js Get Started →

Forms

Contact Form

Validation with attributes and submit lifecycle.

How it works

Validation rules are declared via attributes in PHP. On submit, LiVue validates server-side and exposes messages in $errors.

Thank you for your message!

We'll get back to you soon.

app/LiVue/ContactForm.php
#[Validate('required|min:2')]
public string $name = '';

#[Validate('required|email')]
public string $email = '';

public function submit(): void
{
    $this->validate();
    $this->submitted = true;
    $this->reset([
        'name',
        'email',
        'message',
    ]);
}
resources/views/livue/contact-form.blade.php
<form v-submit="'submit'">
    <input v-model="name"/>
    <span v-if="$errors.name">
        @{{ $errors.name }}
    </span>

    <button v-loading.class="'opacity-50 cursor-not-allowed'">
        <span v-loading>Sending...</span>
        <span v-loading.remove>Send Message</span>
    </button>
</form>