VueForm Laravel Form Builder

Latest Version License PHP Version

Build powerful, production-ready Laravel forms with Vue 3 without writing JavaScript. VueForm Laravel is a comprehensive PHP form builder that seamlessly integrates VueForm's reactive UI components with Laravel's robust backend validation and routing system. Define your forms entirely in PHP, leverage server-side validation, and render beautiful Material Design forms instantly in your Blade templates.

🎯 Why VueForm Laravel?

Developer-First Form Building

  • Zero JavaScript Required - Build complex forms using only PHP classes
  • Server-Side Schema Generation - Forms are defined in Laravel, validated in Laravel, and rendered automatically
  • Material Design UI - Pre-built, customizable Material Theme components included
  • No Frontend Build Process - All CSS and JS assets are pre-compiled and bundled

Enterprise-Ready Features

  • Single Source of Truth - Form schema, validation rules, and business logic live together in PHP
  • Type-Safe Form Builders - Leverage PHP 8.0+ type hints and IDE autocomplete
  • Reusable Form Components - Create form libraries shared across your application
  • AJAX-Ready - Built-in async submission with Laravel CSRF protection
  • Conditional Logic - Show/hide fields based on user input without writing JS
  • Multi-Step Forms - Build wizards and complex form flows declaratively

✨ Key Features

For PHP Developers

  • Reusable Form - Anywhere in your .blade.php file you can use this form
  • Laravel Validation Integration - Use familiar validation rules directly in form definitions
  • Eloquent Model Binding - Auto-populate forms from Eloquent models
  • Dynamic Routing - Automatic endpoint generation based on Laravel routes

Form Element Types

  • Text Inputs - Text, email, password, textarea, URL, number
  • Selection Controls - Radio, checkbox, select, multiselect, toggle
  • Date & Time - Date picker, time picker, datetime picker
  • File Uploads - Single/multiple file upload with preview
  • Rich Content - WYSIWYG editor, markdown editor
  • Dynamic Lists - Repeatable field groups with add/remove
  • Layout Elements - Groups, columns, tabs, steps

🔧 Requirements

  • PHP: 8.0 or higher
  • Laravel: 9.x, 10.x, or 11.x
  • Composer: 2.x or higher
  • Browser Support: Modern browsers (Chrome, Firefox, Safari, Edge)

Note: This package works with Laravel's default frontend setup. No Vue CLI, Vite, or npm installation required on your end—all frontend assets are pre-bundled.

📦 Installation

Step 1: Install via Composer

composer require bijoy4067/vueform-laravel

Step 2: Publish Configuration and Assets

php artisan vendor:publish --tag=vueform-laravel --force

This command publishes:

  • Configuration file to config/vueform-laravel.php
  • Pre-compiled CSS and JavaScript assets to your public directory
  • Stubs for form component generation

Step 3: Add Assets to Your Layout

Add the following to your main Blade layout's <head> section (typically resources/views/layouts/app.blade.php):

<head>
    <!-- Required: CSRF Token for AJAX submissions -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Load VueForm Laravel Assets (CSS + JS) -->
    {{ VueFormLaravel\Abstracts\VueFormBuilder::loadAssets() }}

    <!-- Your other head elements -->
</head>

What this does: Loads pre-compiled Vue 3 components, VueForm library, and Material Theme styles. No build process needed.

⚙️ Configuration

Customize Material Theme Colors

Edit config/vueform-laravel.php to match your brand:

                                
<?php

return [
    'styles' => [
        // Primary brand color
        '--vf-primary' => '#6200ee',

        // Form element styling
        '--vf-bg-input' => '#ffffff',
        '--vf-border-color-input' => '#d1d5db',
        '--vf-radius-input' => '0.375rem',

        // Typography
        '--vf-font-size' => '0.875rem',
        '--vf-line-height' => '1.25rem',

        // Spacing
        '--vf-gutter' => '1rem',
        '--vf-min-height-input' => '2.375rem',

        // State colors
        '--vf-color-success' => '#10b981',
        '--vf-color-danger' => '#ef4444',
    ]
];

After updating configuration, clear your browser cache or do a hard refresh (Ctrl+F5) to see changes.

🚀 Quick Start Guide

Create Your First Form (2 minutes)

1. Generate a Form Component

php artisan vueform:make ContactForm

This creates app/VueForm/ContactForm.php with boilerplate code.

2. Define Form Schema

Open app/VueForm/ContactForm.php and add your form fields:

<?php

namespace App\VueForm;

use VueFormLaravel\Abstracts\VueFormBuilder;
use VueFormLaravel\Elements\Fields\TextElement;
use VueFormLaravel\Elements\Fields\TextareaElement;
use VueFormLaravel\Elements\Static\ButtonElement;
use VueFormLaravel\Elements\Vueform;

class ContactForm extends VueFormBuilder
{
protected function buildForm()
{
    return Vueform::build()
        ->schema([
            TextElement::name('name')
                ->label('Your Name')
                ->rules('required|min:3'),

            TextElement::name('email')
                ->label('Email Address')
                ->rules('required|email'),

            TextareaElement::name('message')
                ->label('Message')
                ->rules('required|min:10'),

            ButtonElement::submitButton('Send Message')
        ]);
    }

    public static function validatedFormData($request)
    {
        // This receives only validated data
        // Send email, save to database, etc.

        return response()->json([
        'message' => 'Thank you! We received your message.'
        ]);
    }
}

3. Add to Controller

<?php

namespace App\Http\Controllers;

use App\VueForm\ContactForm;

class ContactController extends Controller
{
    public function show()
    {
        return view('contact', [
            'contactForm' => app(ContactForm::class)
        ]);
    }
}

4. Render in Blade Template


<!-- resources/views/contact.blade.php -->
@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>Contact Us</h1>
        {!! $contactForm->render() !!}
    </div>
@endsection

That's it! Navigate to your route and see a fully functional, validated contact form with Material Design styling.

FAQ

Common questions developers ask while using VueForm with Laravel.

vueform-laravel is a Laravel backend integration for VueForm that allows you to build form schemas, validation rules, and configurations on the server side and render them seamlessly in Vue.
Basic Vue knowledge is helpful, but most form logic is handled in Laravel. You mainly work with PHP classes while VueForm handles rendering and interactivity on the frontend.
Yes. The package supports advanced structures like GroupElement, ListElement, ObjectElement, grid layouts, conditional fields, nested schemas, and repeatable form sections.
Validation rules are defined in Laravel using familiar validation syntax. VueForm automatically displays validation errors on the frontend based on the server response.
Absolutely. You can customize labels, descriptions, CSS classes, and even inject custom Vue templates using slots for full control over the form UI.
Yes. It is designed for real-world applications and works well with Laravel APIs, AJAX submissions, static builds, and documentation-driven projects.

Source & Credits

Backend:

Frontend:

Theme:

Support

If this documentation doesn’t answer your questions or you’ve found a bug, please create an issue on our GitHub repository. This helps us track problems, discuss features, and provide faster, transparent support.

Create a GitHub Issue
Before creating an issue:
  • Search existing issues to avoid duplicates
  • Include clear steps to reproduce the problem
  • Mention your Laravel, PHP, and package version
Note: Support is limited to bugs, errors, and issues related to this package. Custom implementations or third-party integrations are outside the scope of support.