tranquil-tools/laravel-vue-form-builder

A VueJS/Inertia FormBuilder package for Laravel

Define Laravel-VueJS forms configurations in PHP.

Documentation

Full documentation is available at docs.comfycoders.nl.

Topics covered:

• Installation
• Creating a Form
• All Field Types
• Vue Usage
• Validation
• Configuration

CrudBuilder

Want a complete CRUD solution? Our CrudBuilder builds on top of this FormBuilder and the TableBuilder to give you full create, read, update, and delete flows without repetitive boilerplate.

• Docs: docs.comfycoders.nl/laravel-vue-crud-builder
• GitHub: github.com/ComfyCodersBV/laravel-vue-crud-builder

Installing the CrudBuilder pulls in this package automatically as a Composer dependency.

Quick start

Installation

You can install the package via composer:

composer require tranquil-tools/laravel-vue-form-builder

This is the Vue renderer; it depends on tranquil-tools/laravel-form-builder, the PHP core that defines the fields, validation and schema. One require pulls in both.

Install the frontend dependencies. The package ships raw .vue files that your application compiles, so their imports resolve against your node_modules. Beyond what the Laravel Vue starter kit already gives you:

npm install reka-ui @lucide/vue

A WYSIWYG editor is opt-in. The package imports no editor, so nothing is needed here unless you register one.

Optional: you may publish the config file with:

php artisan vendor:publish --tag="form-builder-config"

This creates config/form-builder.php, which ships with the PHP core.

Alter you vite.config.ts to add an @form-builder alias:

import {defineConfig} from 'vite';
import path from 'path';

export default defineConfig({
    plugins: [
        // ...
    ],
    resolve: {
        alias: {

            // Add this:

            '@form-builder': path.resolve(__dirname, 'vendor/tranquil-tools/laravel-vue-form-builder/resources/js'),
        },
    },
});

Basic usage

<?php

declare(strict_types=1);

namespace App\Http\Controllers;

use App\Forms\CategoryForm;
use App\Http\Requests\CategoryFormRequest;
use App\Models\ExampleModel;
use Inertia\Inertia;
use Inertia\Response;

class ExampleController extends Controller
{
    public function edit(ExampleModel $model): Response
    {
        return Inertia::render('PathToVueFile', [
            'form' => ExampleForm::make()
                ->action(route('categories.update', $model))
                ->method('PUT')
                ->fill($model),
        ]);
    }
}

<?php

declare(strict_types=1);

namespace App\Forms;

use App\Models\Template;
use TranquilTools\FormBuilder\AbstractForm;
use TranquilTools\FormBuilder\Fields\Number;
use TranquilTools\FormBuilder\Fields\Select;
use TranquilTools\FormBuilder\Fields\Submit;
use TranquilTools\FormBuilder\Fields\Text;
use TranquilTools\FormBuilder\Fields\Wysiwyg;
use TranquilTools\FormBuilder\FormConfig;

class ExampleForm extends AbstractForm
{
    public function configure(FormConfig $form)
    {
        $form->class(['space-y-4', 'mx-auto', 'mt-3']);
    }

    public function fields(): array
    {
        return [
            Number::make('position')
                ->label(__('Order'))
                ->rules([
                    'required',
                    'integer',
                    'min:1',
                ]),

            Text::make('title')
                ->label(__('Name'))
                ->autocomplete(false)
                ->rules([
                    'required',
                    'string',
                    'max:255',
                ]),

            Text::make('description')
                ->label(__('Description'))
                ->autocomplete(false)
                ->rules([
                    'required',
                    'string',
                    'max:255',
                ]),
                
            Wysiwyg::make('content')
                ->label(__('Content')),

            Select::make('template_id')
                ->label(__('Template'))
                ->options(Template::all()->pluck('name', 'id')->toArray())
                ->rules([
                    'nullable',
                    'exists:templates,id',
                ]),

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

<?php

declare(strict_types=1);

namespace App\Http\Requests;

use App\Forms\ExampleForm;
use Illuminate\Foundation\Http\FormRequest;

class ExampleFormRequest extends FormRequest
{
    public function rules(): array
    {
        return ExampleForm::rules();
    }
}

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

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

<template>
    <div class="...">
        <div class="...">
            <Form :schema="form"/>
        </div>
    </div>
</template>