PHPackages                             bonsai/crud - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. bonsai/crud

ActiveLibrary[Admin Panels](/categories/admin)

bonsai/crud
===========

A reusable CRUD package for Laravel with Inertia.js and Vue 3

v1.0.2(6mo ago)0791MITVuePHP ^8.1|^8.2|^8.3

Since Oct 16Pushed 6mo agoCompare

[ Source](https://github.com/bonsaicoding/crud)[ Packagist](https://packagist.org/packages/bonsai/crud)[ RSS](/packages/bonsai-crud/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (2)Versions (4)Used By (1)

Laravel Inertia CRUD Package
============================

[](#laravel-inertia-crud-package)

A powerful, reusable CRUD (Create, Read, Update, Delete) package for Laravel applications using Inertia.js and Vue 3. Build complete admin panels and data management interfaces in minutes without repeating yourself.

✨ Features
----------

[](#-features)

- 🚀 **Zero Configuration CRUD** - Define your fields and you're done
- 🎨 **Bootstrap 5 Ready** - Beautiful UI out of the box
- 🔍 **Built-in Search** - Real-time search across all visible columns
- 📄 **Pagination** - Automatic pagination with customizable items per page
- ✏️ **Multiple Field Types** - Text, textarea, number, currency, date, datetime, checkbox, combo/select, and more
- 🔗 **Relationship Support** - Handle Eloquent relationships with ease
- 🎯 **Validation** - Full Laravel validation support
- 🔒 **Flexible Actions** - Enable/disable create, edit, delete, and search actions
- 🎨 **Customizable Buttons** - Add custom action buttons per row
- 🌐 **i18n Ready** - Easy to translate
- 📦 **No Publishing Required** - Components stay in the package for automatic updates

🛠️ Technology Stack
-------------------

[](#️-technology-stack)

This package is built with:

- **Backend:**

    - Laravel 10.x / 11.x / 12.x
    - PHP 8.1+
    - Inertia.js (Server-side adapter)
- **Frontend:**

    - Vue 3 (Composition API)
    - Inertia.js (Client-side adapter)
    - Bootstrap 5
    - FontAwesome 6
    - Axios
    - SweetAlert2
- **Build Tools:**

    - Vite
    - Laravel Vite Plugin

📋 Requirements
--------------

[](#-requirements)

- PHP >= 8.1
- Laravel >= 10.0
- Node.js >= 16.x
- NPM >= 8.x
- Inertia.js
- Vue 3

📦 Installation
--------------

[](#-installation)

### Step 1: Install the Package

[](#step-1-install-the-package)

Install via Composer:

```
composer require bonsai/crud
```

### Step 2: Install Frontend Dependencies

[](#step-2-install-frontend-dependencies)

Install the required JavaScript dependencies:

```
npm install axios bootstrap @fortawesome/fontawesome-free sweetalert2
```

### Step 3: Configure Vite

[](#step-3-configure-vite)

Add the package alias to your `vite.config.js`:

```
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            '@': '/resources/js',
            '@crud': '/vendor/bonsai/crud/resources/js',
        },
    },
});
```

### Step 4: Configure Your App Entry Point

[](#step-4-configure-your-app-entry-point)

Update your `resources/js/app.js` (or `app.ts`):

```
import './bootstrap';
import '../css/app.css';

// Import Bootstrap and FontAwesome
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import '@fortawesome/fontawesome-free/css/all.min.css';

// Import the CRUD helpers plugin
import CrudHelpers from '../../vendor/bonsai/crud/resources/js/plugin.js';
import axios from 'axios';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

// Make axios globally available
window.axios = axios;

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(CrudHelpers)  // Register the CRUD helpers
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});
```

**For TypeScript users**, create `resources/js/types/global.d.ts`:

```
import type { AxiosInstance } from 'axios';

declare global {
    interface Window {
        axios: AxiosInstance;
    }
}

export {};
```

### Step 5: Create Inertia Page Wrappers

[](#step-5-create-inertia-page-wrappers)

Create the directory structure:

```
mkdir -p resources/js/Pages/Crud
```

Create `resources/js/Pages/Crud/Index.vue`:

```

import IndexComponent from '../../../../vendor/bonsai/crud/resources/js/Pages/Index.vue';

defineProps(['title', 'breadcrumb', 'url', 'actions', 'extra_buttons', 'alert']);

```

Create `resources/js/Pages/Crud/Edit.vue`:

```

import EditComponent from '../../../../vendor/bonsai/crud/resources/js/Pages/Edit.vue';

defineProps(['title', 'breadcrumb', 'id', 'url', 'static_url']);

```

### Step 6: Build Assets

[](#step-6-build-assets)

```
npm run dev
```

Or for production:

```
npm run build
```

🚀 Usage
-------

[](#-usage)

### Basic Example

[](#basic-example)

1. **Create a Model and Migration**

```
php artisan make:model Product -m
```

2. **Define Your Migration**

```
// database/migrations/xxxx_create_products_table.php
public function up()
{
    Schema::create('products', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->text('description')->nullable();
        $table->decimal('price', 10, 2)->default(0);
        $table->boolean('active')->default(true);
        $table->timestamps();
    });
}
```

3. **Configure Your Model**

```
// app/Models/Product.php