Asset Panel

Vite entrypoint yang hanya dimuat pada page milik satu panel dan tidak pada page lain. Gunakan ketika sebuah panel membutuhkan stylesheet atau script sendiri — misalnya theme yang berbeda berdasarkan color scheme, library widget pihak ketiga, atau print style untuk reporting panel — tanpa memuatnya pada panel lain maupun page aplikasi di luar panel.

Mendeklarasikan asset

php

use PandaPanel\Core\Panel;
use PandaPanel\Core\PanelProvider;

final class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->path('admin')
            ->auth()
            ->assets('resources/css/panels/admin.css');
    }
}

// vite.config.ts
laravel({
    input: [
        'resources/css/app.css',
        'resources/js/app.ts',
        'resources/css/panels/admin.css',   // the same path, declared to Vite
    ],
    refresh: true,
}),

Ada dua perubahan dan keduanya memang diperlukan. Panel hanya menyebutkan path; Vite tetap harus membangun entrypoint tersebut. Tanpa perubahan kedua, page gagal dengan manifest error. Itu merupakan failure yang benar — asset yang dideklarasikan tetapi tidak pernah dibuild memang merupakan kesalahan — dan itulah alasan fitur ini bukan perubahan satu baris.

Method

php

public function assets(string ...$entrypoints): self

/** @return list<string> */
public function getAssets(): array

Path bersifat relatif terhadap project root dan harus sama persis seperti yang ditulis di vite.config.ts. Pemanggilan bersifat akumulatif dan duplikat dihapus, sehingga plugin atau module dapat menambahkan stylesheet tanpa mengganti asset milik panel:

php

$panel
    ->assets('resources/css/panels/admin.css')
    ->assets('resources/js/panels/admin.ts', 'resources/css/panels/admin.css');

$panel->getAssets();
// ['resources/css/panels/admin.css', 'resources/js/panels/admin.ts']

Memuat asset ke page

Entrypoint milik panel ditambahkan setelah entrypoint milik aplikasi pada Inertia root view:

blade

{{-- resources/views/app.blade.php --}}
@vite([
    'resources/css/app.css',
    'resources/js/app.ts',
    "resources/js/pages/{$page['component']}.vue",
    ...(panel()?->getAssets() ?? []),
])

panel() bernilai null di luar panel, sehingga spread tidak menambahkan apa pun. Di dalam panel, hanya daftar asset panel tersebut yang ditambahkan, bukan asset panel lain. Baris ini berada di root view milik aplikasi daripada diinjeksi package karena root view memang file aplikasi — lihat Inertia root view jika file Anda belum memilikinya.

Urutan load penting: entrypoint aplikasi dimuat lebih dulu sehingga stylesheet panel dapat meng-override style dari app.css, bukan sebaliknya.

Di mana asset dimuat

Request	Entrypoint panel yang dimuat
`/admin` dan seluruh page di bawahnya	milik `admin`
`/app` dan seluruh page di bawahnya	milik `app`
`/` dan semua page non-panel	tidak ada

Daftar asset itu sendiri tidak pernah dikirim ke frontend. toSharedArray() tidak memiliki key assets: browser menerima tag hasil Vite, bukan metadata yang membentuk tag tersebut.

Stylesheet khusus per panel

Penggunaan paling umum adalah styling yang tidak cukup diekspresikan dengan CSS custom property saja — terutama style yang bergantung pada color scheme. colors(dark: ...) memang diserialisasi, tetapi inline style tidak dapat mengatakan "hanya ketika berada di bawah .dark":

css

/* resources/css/panels/admin.css */
@import 'tailwindcss';

.panel-shell {
    --primary: #4f46e5;
}

.dark .panel-shell {
    --primary: #818cf8;
}

.panel-topbar {
    border-bottom-width: 2px;
}

Setiap bagian shell memiliki class panel-* yang stabil, terlepas dari apakah panel mengonfigurasi sesuatu atau tidak. Class inilah yang ditarget stylesheet. Daftar lengkapnya tersedia di Branding.

Class yang ditambahkan melalui cssHooks() menggunakan mekanisme berbeda dan memiliki failure mode yang berbeda. Class yang hanya ditulis di PHP provider tidak berada pada file yang discan Tailwind, sehingga class tersebut harus sudah muncul di source yang dibaca Tailwind atau provider harus dimasukkan ke content glob. Stylesheet yang dimuat melalui asset panel tidak memiliki masalah ini karena Vite memang mengompilasinya.

Catatan

Entrypoint adalah path source, bukan built file. Path yang tidak tercantum pada input milik vite.config.ts akan melempar Vite manifest exception pada page pertama panel tersebut.
Jalankan npm run build — atau biarkan npm run dev tetap berjalan — setelah menambahkan entrypoint. Tidak ada bagian proses ini yang diselesaikan saat request kecuali pemilihan daftar asset.
assets() bersifat akumulatif dan tidak menyediakan mekanisme remove. Panel yang tidak boleh memuat suatu asset harus tidak pernah mendeklarasikannya.
Fitur ini berbeda dari php artisan vendor:publish --tag=panda-panel-assets, yang mem-publish Vue component Panel ke aplikasi, dan berbeda pula dari php artisan panel:assets, yang melaporkan published file yang tertinggal versinya. Lihat Updating Assets.
Entrypoint panel juga dimuat pada auth page milik panel karena route tersebut membawa panel prefix dan tetap me-resolve panel — login page tetap mempertahankan tampilan panel.

Asset Panel ​

Mendeklarasikan asset ​

Method ​

Memuat asset ke page ​

Di mana asset dimuat ​

Stylesheet khusus per panel ​

Catatan ​

Lihat juga ​