ComfyCoders TranquilTools
Docs /Laravel Vue FormBuilder
Repository
v1

Laravel Vue Form Builder

A Laravel package that lets you define forms in PHP and render them in Vue, without writing any HTML/VueJS yourself.

Define fields and validation rules in a PHP class. The package serializes this into a JSON schema, passes it via Inertia, and a Vue component renders the complete form with labels, error messages, and submission handling.

How it works

  1. Define a form class in PHP extending AbstractForm
  2. Pass the schema to your Vue page via Inertia
  3. Render it with a single <Form :schema="form" /> component

Quick example

PHP form class:

<?php

declare(strict_types=1);

namespace App\Forms;

use TranquilTools\FormBuilder\AbstractForm;
use TranquilTools\FormBuilder\Fields\Select;
use TranquilTools\FormBuilder\Fields\Submit;
use TranquilTools\FormBuilder\Fields\Text;
use TranquilTools\FormBuilder\FormConfig;

class ProductForm extends AbstractForm
{
    public function configure(FormConfig $form): void
    {
        $form->class('space-y-4');
    }

    public function fields(): array
    {
        return [
            Text::make('name')
                ->label('Name')
                ->required()
                ->rules('string', 'max:255'),

            Select::make('category_id')
                ->label('Category')
                ->options(Category::query()->pluck('name', 'id')->toArray())
                ->rules('nullable', 'exists:categories,id'),

            Submit::make()->label('Save'),
        ];
    }
}

Controller:

return Inertia::render('Products/Edit', [
    'form' => ProductForm::make()
        ->fill($product)
        ->action(route('products.update', $product))
        ->method('PUT'),
]);

Vue page:

<script setup lang="ts">
import Form from '@form-builder/components/Form.vue';
import type { FormSchema } from '@form-builder/types/form-builder';

defineProps<{ form: FormSchema }>();
</script>

<template>
    <Form :schema="form" />
</template>

Next steps