README

🚀 Vuelament

A lightning-fast, lightweight, and modern Admin Dashboard & CRUD Generator for Laravel.
Built on the VILT stack (Vue 3, Inertia.js, Laravel, Tailwind CSS) and powered by Shadcn Vue for a gorgeous UI.

✨ Features

• Ultra Lightweight: Minimal dependencies, split code-chunking, and no bloat.
• Beautiful UI: Uses Tailwind CSS v4 and Shadcn-Vue for a premium, accessible, and easily customizable design.
• VILT Stack: Seamless SPA experience powered by Laravel, Inertia, Vue 3, and Tailwind.
• Filament-Inspired Architecture: Panel-first, module-based structure with page classes, header actions, and service-based action handling.
• No Per-Model Controllers: Generic ResourceRouteController handles all CRUD routing automatically — zero boilerplate.
• Complete Form Builder: Supports Rich Editor (Vue Quill), Date/Time Pickers (VueDatePicker), File Uploads, Selects, Toggles, Checkboxes, Radios, and responsive Grid Layouts.
• Client-Side Form Reactivity: Show/hide, enable/disable, and change required state of fields instantly without server requests.
• Robust Table Builder: Supports filtering, search, pagination, bulk actions, column toggling, and rich column types (Text, Badge, Toggle, Checkbox, Image, Icon).
• Service-Based Actions: Business logic lives in dedicated Service classes — testable, reusable, and separated from framework concerns.
• Dynamic Modals: Conditional Action dialogs, flexible modal widths, click-away handling, and dangerous action confirmations.
• Multi-Panel Support: Run multiple isolated admin panels (Admin, Sales, etc.) with zero conflict.

📦 Requirements

• PHP 8.2+
• Laravel 11.x / 12.x
• Node.js 18+ & NPM

🛠️ Installation (Step-by-Step Manual)

Due to frequent issues with automated Shadcn-Vue installations and Tailwind CSS versions, we highly recommend setting up Vuelament and Shadcn-Vue manually following these best practices. Let's build your panel step-by-step!

1. Install via Composer

Gunakan constraint versi stabil (bukan dev-main) agar dapat update yang ter-tag (mis. 1.7.1):

composer require christyoga123/vuelament:^1.7

Atau di composer.json:

"christyoga123/vuelament": "^1.7"

Lalu composer update christyoga123/vuelament akan mengambil rilis terbaru (mis. 1.7.1). Hindari dev-main di production.

2. Scaffold Configuration & Base Layouts

Run the install command to publish config & Blade, generate the panel provider, and scaffold Vite/Inertia. Vue/JS assets (Pages, Layouts, components) are not copied — they stay in vendor/christyoga123/vuelament/resources/js, so when you run composer update christyoga123/vuelament the UI (forms, tables, etc.) updates automatically.

php artisan vuelament:install

To override or customize specific Vue files, copy them into your app first:

php artisan vendor:publish --tag=vuelament-views

Then edit the copies in resources/js/Pages/Vuelament, resources/js/Layouts, or resources/js/components/vuelament as needed.

3. Install NPM Dependencies

Install Inertia, Vue, Tailwind plugins, and other essential Vuelament dependencies:

npm install @inertiajs/vue3 @vitejs/plugin-vue @vueuse/core @vueup/vue-quill @vuepic/vue-datepicker lucide-vue-next vue-sonner reka-ui class-variance-authority clsx tailwind-merge tw-animate-css
npm install -D typescript vue-tsc

4. Setup Shadcn-Vue (Manual Initialization)

Run the Shadcn-Vue initialization wizard:

npx shadcn-vue@latest init

Choose your preferred settings. Make sure to match this components.json layout, specifically setting "typescript": false and your aliases to @/components and @/lib/utils:

{
  "$schema": "https://shadcn-vue.com/schema.json",
  "style": "new-york",
  "typescript": false,
  "tailwind": {
    "config": "",
    "css": "resources/css/app.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "composables": "@/composables"
  }
}

5. Install Shadcn-Vue Required Components

Vuelament relies on several key components. Install them in one go:

npx shadcn-vue@latest add alert-dialog avatar breadcrumb button card checkbox dialog dropdown-menu input label pagination popover radio-group scroll-area select separator sheet sidebar skeleton sonner switch table textarea tooltip

Tip: If you encounter an error trying to pull the sidebar component (due to strict typescript rules), temporarily change "typescript": true inside components.json, run the add command again, and revert back to false.

6. Run Migrations & Create Admin

Finally, finish the setup by running your migrations, creating an initial user, and starting your dev server:

php artisan migrate
php artisan vuelament:user
npm run dev
php artisan serve

Visit http://localhost:8000/admin/login to access your dashboard!

Upgrading: If you see "Failed to resolve import @vuelament/AppWrapper.vue", your vite.config.js is missing the @vuelament alias — run php artisan vuelament:install once. If you see "Failed to resolve import @/lib/utils", run install to create resources/js/lib/utils.js. If the sidebar overlaps the main content (layout broken), Tailwind isn’t scanning the vendor Vue files — run php artisan vuelament:install to add @source "../../vendor/christyoga123/vuelament/resources/js/**/*.vue" to resources/css/app.css so classes like lg:pl-64 are generated. If you previously published Vue files, remove them from resources/js so the app uses the copy in vendor.

Updating Shadcn-Vue components

Shadcn-Vue components live in your app (resources/js/components/ui/), so they don’t update automatically. To pull the latest version of a component from the registry, run:

npx shadcn-vue@latest add <component-name>

Example: npx shadcn-vue@latest add button sonner. If the file already exists, the CLI will usually ask whether to overwrite. Choose overwrite to get the new code — if you’ve customized that file, merge your changes manually or keep a backup first.

📁 Architecture — Panel-First, Module-Based

app/Vuelament/{Panel}/{Model}/
    ├── Resources/              ← CRUD page classes (like Filament)
    │    ├── List{Model}s.php        → getHeaderActions(): [CreateAction::make()]
    │    ├── Create{Model}.php       → getHeaderActions(), getFormActions()
    │    └── Edit{Model}.php         → getHeaderActions(), getFormActions()
    │
    ├── Pages/                  ← Custom pages (non-CRUD)
    │
    ├── Services/               ← Business logic (service-based actions)
    │    └── {Model}Service.php
    │
    ├── Widgets/                ← Dashboard widgets
    │
    └── {Model}Resource.php     ← Form schema, table schema, getPages()

No per-model controller needed! The framework's generic ResourceRouteController handles all CRUD routing automatically. You only need Resource + Page classes + Services.

🧩 Artisan Commands

Generate a Resource (full module)

# Multi-page mode (default) — generates List, Create, Edit pages
php artisan vuelament:resource Product --panel=Admin

# Single mode — modal-based create/edit (ManageProducts)
php artisan vuelament:resource Product --panel=Admin --simple

# Auto-generate form/table from database columns
php artisan vuelament:resource Product --panel=Admin --generate

This generates the full module structure:

app/Vuelament/Admin/Product/
    ├── Resources/
    │    ├── ListProducts.php       ← with CreateAction in getHeaderActions()
    │    ├── CreateProduct.php
    │    └── EditProduct.php
    ├── Pages/
    ├── Services/
    │    └── ProductService.php
    ├── Widgets/
    └── ProductResource.php         ← with getPages() referencing page classes

Generate a Service

# Basic — creates ProductService in the Product module
php artisan vuelament:service Product --panel=Admin

# With explicit resource module
php artisan vuelament:service Payment --panel=Admin --resource=Order

Generate a Custom Page

# Standalone page
php artisan vuelament:page Analytics --panel=Admin

# Page attached to a resource
php artisan vuelament:page Report --panel=Admin --resource=User

Generate a Panel

php artisan vuelament:panel Sales --id=sales

Create Admin User

php artisan vuelament:user

🚀 Usage Guide

Page Classes — Like Filament

Page classes define page-level actions via getHeaderActions(). This is identical to Filament's pattern.

// app/Vuelament/Admin/User/Resources/ListUsers.php
use ChristYoga123\Vuelament\Core\Pages\ListRecords;
use ChristYoga123\Vuelament\Components\Actions\CreateAction;

class ListUsers extends ListRecords
{
    protected static ?string $resource = UserResource::class;

    public static function getHeaderActions(): array
    {
        return [
            CreateAction::make(),
            // ExportAction::make(),
            // ImportAction::make(),
        ];
    }
}

Resource Registration — getPages()

Resources register their CRUD page classes and custom pages in getPages():

public static function getPages(): array
{
    return [
        // CRUD page classes — framework reads getHeaderActions() from these
        'index'  => Resources\ListUsers::class,
        'create' => Resources\CreateUser::class,
        'edit'   => Resources\EditUser::class,

        // Custom pages
        'report' => Pages\ReportPage::route('/{record}/report'),
    ];
}

Table Schema — Row-Level Actions Only

Table schemas contain only row-level inline actions. Page-level actions (like "Create") belong in getHeaderActions() on the page class.

public static function tableSchema(): PageSchema
{
    return PageSchema::make()
        ->components([
            Table::make()
                ->query(fn() => User::query()->latest())
                ->columns([
                    TextColumn::make('name')->searchable()->sortable(),
                    TextColumn::make('email')->sortable()->searchable(),
                    ToggleColumn::make('is_active')->label('Active'),
                ])
                ->actions([
                    // ✅ Row-level actions (inline in table)
                    Action::make('deactivate')
                        ->icon('user-x')
                        ->color('warning')
                        ->requiresConfirmation('Deactivate User', 'Are you sure?')
                        ->action([UserService::class, 'deactivate']),
                    EditAction::make(),
                    DeleteAction::make(),
                ])
                ->bulkActions([
                    ActionGroup::make('Bulk Actions')
                        ->icon('list')
                        ->actions([
                            DeleteBulkAction::make(),
                            RestoreBulkAction::make(),
                        ]),
                ])
                ->filters([
                    TrashFilter::make(),
                ])
                ->searchable()
                ->paginated()
                ->selectable(),
        ]);
}

Defining Forms

use ChristYoga123\Vuelament\Components\Layout\Grid;
use ChristYoga123\Vuelament\Components\Layout\Section;
use ChristYoga123\Vuelament\Components\Form\TextInput;
use ChristYoga123\Vuelament\Components\Form\Toggle;

public static function formSchema(): PageSchema
{
    return PageSchema::make()
        ->components([
            Section::make('General Information')
                ->components([
                    Grid::make(2)->components([
                        TextInput::make('name')->required()->uniqueIgnoreRecord(),
                        TextInput::make('email')->email()->required()->uniqueIgnoreRecord(),
                    ]),
                    Toggle::make('is_active')
                        ->label('Status Active')
                        ->hint('Turn off to prevent user login.'),
                    TextInput::make('password')
                        ->password()
                        ->revealable()
                        ->dehydrateStateUsing(fn (string $state): string => Hash::make($state))
                        ->saved(fn (?string $state): bool => filled($state))
                        ->required(fn (string $operation): bool => $operation === 'create'),
                ])
        ]);
}

Available Form Controls

• TextInput — text, email, password, number, with prefix/suffix and revealable support
• Textarea — multi-line text input
• RichEditor — Rich text editor (powered by VueQuill)
• DatePicker, TimePicker, DateRangePicker — Date/time selection (powered by VuePic)
• Select — Dropdown selection
• Checkbox — Single or multiple checkbox group
• Radio — Radio button group with horizontal/vertical layout
• Toggle — Switch toggle (powered by Shadcn Switch)
• FileInput — File upload with drag & drop, preview, and reorder support
• Repeater — Dynamic repeatable field groups

⚡ Service-Based Actions

Unlike Filament (where actions use Livewire Closures), Vuelament uses dedicated Service classes for business logic. This makes actions testable, reusable, and framework-agnostic.

Flow

Resource   →  defines actions with form + service callable
   ↓
Action     →  captures form data, resolves service from container
   ↓
Service    →  executes business logic (pure PHP, testable)
   ↓
Database   →  Eloquent operations

Action in Resource

Action::make('deactivate')
    ->icon('user-x')
    ->color('warning')
    ->requiresConfirmation('Deactivate User', 'Are you sure?')
    ->action([UserService::class, 'deactivate'])

Service Class

// app/Vuelament/Admin/User/Services/UserService.php
class UserService
{
    public function deactivate(User $user, array $data = []): void
    {
        $user->update(['is_active' => false]);
    }
}

How It Works

The framework resolves the service instance from the container and injects dependencies:

$instance = app(UserService::class);

app()->call([$instance, 'deactivate'], [
    'user'   => $record,    // injected by lowercase model basename
    'record' => $record,    // also available as generic 'record'
    'data'   => $formData,  // form data from modal
]);

Actions with Forms

Action::make('assign_role')
    ->icon('shield')
    ->color('success')
    ->form([
        Select::make('role')->options([
            'admin' => 'Admin',
            'editor' => 'Editor',
        ])->required(),
    ])
    ->action([UserService::class, 'assignRole'])

🎯 Form Reactivity (Client-Side)

Vuelament evaluates form visibility, disabled, and required states entirely on the client — no server requests needed.

⚔️ Vuelament vs Filament

Toggle::make('is_active')->label('Active Status'),

// Shows INSTANTLY when is_active is toggled on (no server request!)
TextInput::make('activation_code')
    ->visibleWhen('is_active', true)
    ->requiredWhen('is_active', true),

Select::make('type')->options([
    'standard' => 'Standard',
    'premium'  => 'Premium',
]),

// Shows only when type = 'premium'
TextInput::make('premium_code')
    ->visibleWhen('type', 'premium'),

Available Reactivity Methods

Supported Operators

===, !==, in, notIn, filled, blank, >, <, >=, <=

⚡ Custom Actions & Modals

use ChristYoga123\Vuelament\Components\Table\Actions\Action;

Action::make('form')
    ->icon('form')
    ->color('success')
    ->label('Fill Form')
    ->modalHeading('Detailed User Form')
    ->modalWidth('4xl')
    ->modalCloseByClickingAway(false)
    ->modalCancelActionLabel('Close')
    ->form([
        TextInput::make('reference_id')->required(),
        Radio::make('type')->options([
            'a' => 'Type A',
            'b' => 'Type B',
        ])
    ])
    ->action([SomeService::class, 'processForm'])

Action Configuration Methods

• ->requiresConfirmation(): Auto-converts the form into a danger Action/Alert Dialog.
• ->modalWidth('2xl'): Defines the modal width dynamically.
• ->modalCancelAction(false) / ->modalSubmitAction(false): Hide specific modal buttons.
• ->modalCloseByClickingAway(false): Prevents accidental closure from outside clicks.

🏢 Multi-Panel Support

Vuelament supports multiple isolated admin panels by default.

Creating a new panel:

php artisan vuelament:panel Sales --id=sales

This creates App\Vuelament\Providers\SalesPanelProvider. Register in bootstrap/providers.php.

Creating resources for a specific panel:

php artisan vuelament:resource Invoice --panel=Sales

Vuelament isolates backend and frontend files into separate silos:

Backend: app/Vuelament/Sales/Invoice/InvoiceResource.php

• Frontend: resources/js/Pages/Vuelament/Sales/Resource/Invoice/...

AdminPanelProvider and SalesPanelProvider have zero conflict.

Restricting Access via User Model

By default, any authenticated user can access any panel. To restrict access (e.g., using roles), add a hasPanelAccess (or canAccessPanel) method your User model (app/Models/User.php):

use ChristYoga123\Vuelament\Core\Panel;

class User extends Authenticatable
{
    public function hasPanelAccess(Panel $panel): bool
    {
        // Example: Only let users with role 'admin' access the Admin panel
        if ($panel->getId() === 'admin') {
            return $this->role === 'admin';
        }

        // Example: Only let 'sales' role access the Sales panel
        if ($panel->getId() === 'sales') {
            return $this->role === 'sales';
        }

        return true; // Default access
    }
}

If a user tries to log in to a Panel they do not possess access to, Vuelament will gracefully prevent login and securely show a "You cannot access this panel" error.

🎨 Custom Pages & Widgets

Generate completely custom pages for charts, widgets, or dashboards:

php artisan vuelament:page Analytics --panel=Admin

This generates two files:

• app/Vuelament/Admin/Pages/AnalyticsPage.php
• resources/js/Pages/Vuelament/Admin/Pages/AnalyticsPage.vue

use ChristYoga123\Vuelament\Core\BasePage;

class AnalyticsPage extends BasePage
{
    protected static ?string $navigationIcon = 'activity';
    protected static ?string $navigationLabel = 'Live Analytics';
    protected static string $slug = 'analytics';

    public static function getData(?\Illuminate\Database\Eloquent\Model $record = null): array
    {
        return [
            'totalUsers' => User::count(),
            'revenue' => 5000000,
        ];
    }
}

🛠️ Performance & Optimizations

• Automatic Code Splitting: Large libraries (vue-quill, vue-datepicker) are isolated into chunks via Vite.
• Inertia.js Driven: Lightning-fast SPA page transitions, no full browser reloads.
• Client-Side Reactivity: Form states evaluated in Vue without server requests.
• Interactive Column Loading States: Toggle/Checkbox columns disable during server requests, preventing spam.
• No Per-Model Controllers: Zero boilerplate controllers — framework handles routing.

📁 Frontend Architecture

resources/js/components/vuelament/
├── Table.vue                           # Main table orchestrator
├── table/
│   ├── utils.js                        # Pure helpers (resolveIcon, formatCell)
│   ├── composables/
│   │   └── useTableState.js            # All reactive table state & logic
│   ├── columns/
│   │   ├── ColumnCell.vue              # Dispatcher (selects by col.type)
│   │   ├── TextCell.vue                # Text + prefix/suffix/color
│   │   ├── BadgeCell.vue               # Badge with colors
│   │   ├── ToggleCell.vue              # Shadcn Switch + loading
│   │   ├── CheckboxCell.vue            # Checkbox + loading
│   │   ├── ImageCell.vue               # Image with circle/thumbnail
│   │   └── IconCell.vue                # Dynamic Lucide icon
│   ├── TableToolbar.vue                # Search + filters + column toggle
│   ├── TableFiltersAbove.vue           # Filters above table
│   ├── TableRowActions.vue             # Row actions (edit, delete, custom)
│   ├── TablePagination.vue             # Pagination + per page
│   ├── TableConfirmDialog.vue          # Confirmation dialog
│   └── TableActionFormDialog.vue       # Custom action form dialog
├── form/
│   ├── RichEditor.vue                  # Rich text editor wrapper
│   ├── DatePicker.vue                  # Date/time picker wrapper
│   └── composables/
│       └── useFormReactivity.js         # Client-side form reactivity

Key Design Patterns

• Composables (useTableState, useFormReactivity) — extract all reactive logic from components
• Provide/Inject — table sub-components access shared state without prop drilling
• Column Cell Dispatcher — ColumnCell.vue routes to correct sub-component based on col.type
• HasReactivity Trait (PHP) — provides visibleWhen(), disabledWhen(), requiredWhen() methods serialized to JSON rules

🔧 Configuration

Publish the config file:

php artisan vendor:publish --tag=vuelament-config

// config/vuelament.php
return [
    'default_panel' => 'admin',
    'user_model' => \App\Models\User::class,
    'app_path' => 'Vuelament',
    'assets' => [
        'auto_publish' => true,
    ],
];

Customizing Stubs

You can publish and customize the code generation stubs:

php artisan vendor:publish --tag=vuelament-stubs

Stubs will be published to stubs/vuelament/. The framework will prioritize custom stubs over package defaults.

📋 All Available Commands

Common Options

📄 License

Vuelament is open-sourced software licensed under the MIT License.

Happy Coding! 🎉