README

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

Install the Quill wysiwyg editor dependencies:

npm install vue-quilly quill quill-image-resize-module
npm run build

Optional: you may publish the config file with:

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

The content of the published config can be viewed here.

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>