Laravel Form Builder using VueForm

Latest Version License PHP Version

VueForm Laravel is a modern Laravel Form Builder that allows developers to build dynamic forms using PHP while Vue 3 renders the interface automatically. This package integrates Vueform with Laravel so you can create schema-based forms, handle validation in Laravel, and generate beautiful Material Design forms without writing complex frontend code.

Why Use VueForm Laravel – A Modern Laravel Form Builder

Building complex forms in Laravel often requires writing repetitive HTML, JavaScript, and validation logic. VueForm Laravel solves this problem by providing a powerful Laravel Form Builder that integrates Vueform with Laravel's backend. Developers can define form schemas entirely in PHP while Vue 3 automatically renders the user interface. This approach keeps business logic inside Laravel while leveraging Vue's reactive frontend components.

Developer-First Form Building

  • Zero JavaScript Required – Build dynamic forms using only PHP classes
  • Server-Side Schema Generation – Define forms, validation rules, and logic directly in Laravel
  • Vue 3 Powered Rendering – Vueform automatically generates reactive form components
  • Material Design UI – Pre-built and customizable Material Design form elements
  • No Frontend Build Process – All Vue and CSS assets are pre-compiled and bundled

Enterprise-Ready Features

  • Single Source of Truth – Form schema, validation, and logic live together in PHP
  • Type-Safe Form Builders – Use PHP 8+ type hints with IDE autocomplete
  • Reusable Form Components – Build reusable form structures across Laravel applications
  • AJAX-Ready – Built-in asynchronous form submission with CSRF protection
  • Conditional Logic – Show or hide fields dynamically based on user input
  • Multi-Step Forms – Create complex multi-page forms and wizards easily

Key Features of the VueForm Laravel Form Builder

Laravel Integration

  • Reusable Forms – Render forms anywhere inside your .blade.php templates
  • Laravel Validation Integration – Use familiar Laravel validation rules
  • Eloquent Model Binding – Automatically populate forms using Eloquent models
  • Dynamic Routing – Automatically generate submission endpoints using Laravel routes

Supported Form Elements

  • Text Inputs – Text, email, password, textarea, URL, number
  • Selection Controls – Radio, checkbox, select, multiselect, toggle
  • Date & Time Pickers – Date, time, and datetime inputs
  • File Uploads – Single or multiple file uploads with preview
  • Rich Content Editors – WYSIWYG and markdown editors
  • Dynamic Lists – Repeatable form sections with add/remove functionality
  • Layout Components – Groups, columns, tabs, and step-based forms

🔧 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.