Download the PHP package christyoga123/vuelament without Composer
On this page you can find all versions of the php package christyoga123/vuelament. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download christyoga123/vuelament
More information about christyoga123/vuelament
Files in christyoga123/vuelament
Package vuelament
Short Description Lightning-fast Admin Dashboard & CRUD Generator for Laravel (VILT Stack)
License MIT
Homepage https://github.com/christyoga123/vuelament
Informations about the package vuelament
π 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
ResourceRouteControllerhandles 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):
Atau di composer.json:
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.
To override or customize specific Vue files, copy them into your app first:
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:
4. Setup Shadcn-Vue (Manual Initialization)
Run the Shadcn-Vue initialization wizard:
Choose your preferred settings. Make sure to match this components.json layout, specifically setting "typescript": false and your aliases to @/components and @/lib/utils:
5. Install Shadcn-Vue Required Components
Vuelament relies on several key components. Install them in one go:
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:
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:
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
No per-model controller needed! The framework's generic
ResourceRouteControllerhandles all CRUD routing automatically. You only need Resource + Page classes + Services.
π§© Artisan Commands
Generate a Resource (full module)
This generates the full module structure:
Generate a Service
Generate a Custom Page
Generate a Panel
Create Admin User
π Usage Guide
Page Classes β Like Filament
Page classes define page-level actions via getHeaderActions(). This is identical to Filament's pattern.
Resource Registration β getPages()
Resources register their CRUD page classes and custom pages in getPages():
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.
Defining Forms
Available Form Controls
TextInputβ text, email, password, number, with prefix/suffix and revealable supportTextareaβ multi-line text inputRichEditorβ Rich text editor (powered by VueQuill)DatePicker,TimePicker,DateRangePickerβ Date/time selection (powered by VuePic)Selectβ Dropdown selectionCheckboxβ Single or multiple checkbox groupRadioβ Radio button group with horizontal/vertical layoutToggleβ Switch toggle (powered by Shadcn Switch)FileInputβ File upload with drag & drop, preview, and reorder supportRepeaterβ 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
Action in Resource
Service Class
How It Works
The framework resolves the service instance from the container and injects dependencies:
Actions with Forms
π― Form Reactivity (Client-Side)
Vuelament evaluates form visibility, disabled, and required states entirely on the client β no server requests needed.
βοΈ Vuelament vs Filament
| Interaction | Filament (Livewire) | Vuelament (Vue 3 + Inertia) |
|---|---|---|
| Toggle field to show another | π Network request, re-renders component | β‘ Instant. JavaScript only |
| Change required state based on selection | π Requires network request | β‘ Instant. No server overhead |
| Simple validation visibility | π Network round-trip, can feel sluggish | β‘ Instant. Zero latency |
Available Reactivity Methods
| Method | Description |
|---|---|
->visibleWhen('field', value) |
Show when field equals value |
->hiddenWhen('field', value) |
Hide when field equals value |
->disabledWhen('field', value) |
Disable when field equals value |
->enabledWhen('field', value) |
Enable when field equals value |
->requiredWhen('field', value) |
Required when field equals value |
->visibleWhenAll([...]) |
Show when ALL conditions match (AND logic) |
->visibleWhenAny([...]) |
Show when ANY condition matches (OR logic) |
Supported Operators
===, !==, in, notIn, filled, blank, >, <, >=, <=
β‘ Custom Actions & Modals
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:
This creates App\Vuelament\Providers\SalesPanelProvider. Register in bootstrap/providers.php.
Creating resources for a specific panel:
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):
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:
This generates two files:
app/Vuelament/Admin/Pages/AnalyticsPage.phpresources/js/Pages/Vuelament/Admin/Pages/AnalyticsPage.vue
π οΈ 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
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.vueroutes to correct sub-component based oncol.type - HasReactivity Trait (PHP) β provides
visibleWhen(),disabledWhen(),requiredWhen()methods serialized to JSON rules
π§ Configuration
Publish the config file:
Customizing Stubs
You can publish and customize the code generation stubs:
Stubs will be published to stubs/vuelament/. The framework will prioritize custom stubs over package defaults.
π All Available Commands
| Command | Description |
|---|---|
vuelament:install |
Install Vuelament β publish assets, scaffold, setup |
vuelament:resource {Name} |
Generate full CRUD module (Resource + Pages + Service) |
vuelament:service {Name} |
Generate a Service class for action business logic |
vuelament:page {Name} |
Generate a custom page (PHP class + Vue component) |
vuelament:panel {Name} |
Generate a new panel provider |
vuelament:user |
Create an admin user |
Common Options
| Option | Description | Available On |
|---|---|---|
--panel=Admin |
Target panel (default: Admin) | resource, service, page |
--resource=User |
Attach to resource module | service, page |
--simple |
Single-mode (modal create/edit) | resource |
--generate |
Auto-generate from database | resource |
--force |
Overwrite existing files | all |
π License
Vuelament is open-sourced software licensed under the MIT License.
Happy Coding! π
All versions of vuelament with dependencies
laravel/framework Version ^11.0|^12.0
inertiajs/inertia-laravel Version ^2.0