Laravel Vue CRUD Builder

Full CRUD scaffolding for Laravel + Vue 3 + Inertia.js, built on top of laravel-vue-form-builder and laravel-vue-table-builder.

One command scaffolds a complete CRUD resource: controller, form class, table class, form request, and Vue pages. Point it at a model and fields/columns are generated from your database schema automatically.

Installation

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

Install the required npm packages:

npm install reka-ui lucide-vue-next

Then run the installer, which publishes the config and patches vite.config.ts and resources/css/app.css:

php artisan crud-builder:install

Usage

Scaffold a CRUD resource

php artisan make:crud User

You will be prompted for the model class (pre-filled guess based on the resource name). Press Enter to accept, or clear to skip schema detection and generate empty Form/Table classes.

This generates:

• app/Http/Controllers/UserController.php — explicit controller with all CRUD methods
• app/Forms/UserForm.php — form class with schema-detected fields
• app/Tables/UserTable.php — table class with schema-detected columns
• app/Http/Requests/UserRequest.php — form request backed by UserForm::rules()
• resources/js/pages/Users/Index.vue and Form.vue — Inertia pages

Then register the route in routes/web.php:

Route::resource('users', \App\Http\Controllers\UserController::class);

The generated controller extends Laravel's Controller and includes all CRUD methods explicitly, using model route binding and the generated form, table, and request classes:

class UserController extends Controller
{
    public function index(): Response
    {
        return Inertia::render('Users/Index', [
            'table' => UserTable::build()->rowLink(fn ($row) => route('users.show', $row)),
            'title' => 'Users',
            'createRoute' => route('users.create'),
        ]);
    }

    public function store(UserRequest $request): RedirectResponse
    {
        User::create($request->validated());

        return redirect()->route('users.index')->with('success', 'User created.');
    }

    // edit, update, destroy …
}

All methods are written out explicitly, so you can customize the controller directly.

Auto schema detection

When a model is provided during make:crud, the generated UserForm and UserTable are pre-populated with fields and columns derived from the database schema:

php artisan make:crud User --model=App\\Models\\User

Column type mapping:

Columns id, password, remember_token, email_verified_at, created_at, updated_at, deleted_at are excluded from forms by default.

Vue pages

The generated Index.vue and Form.vue use the table and form builder components:

<!-- Users/Index.vue -->
<script setup lang="ts">
    import TableBuilder from '@table-builder/components/TableBuilder.vue'
    import type {TableData} from '@table-builder/types/table-builder'

    defineProps<{ table: TableData; title: string; createRoute: string }>()
</script>

<template>
    <TableBuilder :table="table"/>
</template>

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

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

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

Shared Vue pages

Instead of generating per-resource pages, publish shared Crud/Index.vue and Crud/Form.vue pages once and reuse them across all CRUD resources:

php artisan vendor:publish --tag=crud-builder-pages

Set in config/vue-crud-builder.php:

'pages' => 'shared',   // 'per-resource' | 'shared' | 'ask' (default)

Or pass --shared / --pages to make:crud to override per-command.

Customising stubs

Publish stubs to the project's stubs/ directory to override the generated output:

php artisan vendor:publish --tag=crud-builder-stubs

stubs/
  crud-controller.stub  # the controller
  crud-form.stub        # the Form class
  crud-table.stub       # the Table class
  index-page.stub       # the Index Vue page
  form-page.stub        # the Form Vue page

Configuration

// config/vue-crud-builder.php

return [
    // 'per-resource' — generate Index.vue + Form.vue per resource (default)
    // 'shared'       — use published Crud/Index.vue + Crud/Form.vue
    // 'ask'          — prompt during make:crud
    'pages' => env('CRUD_BUILDER_PAGES', 'ask'),

    // Namespaces used during code generation
    'namespaces' => [
        'models'   => 'App\\Models',
        'forms'    => 'App\\Forms',
        'tables'   => 'App\\Tables',
        'requests' => 'App\\Http\\Requests',
    ],
];

Changelog

Please see CHANGELOG for more information on what has changed recently.

Credits

• ComfyCoders B.V.

License

The MIT License (MIT). Please see License File for more information.