Dashboard Assets
Dashboard Assets
Queue Monitor ships with precompiled dashboard CSS and JavaScript. No Node, Vite, Livewire, or Inertia setup is required in the host application.
Default: Served Package Assets
By default, the dashboard streams the precompiled files from a package route with a long, immutable cache, so the ~1 MB chart library is fetched once and reused across page loads instead of being re-sent inside every dashboard response:
QUEUE_MONITOR_ASSET_MODE=served
This is the zero-setup mode — no publishing required — and the URLs carry a content-hash version, so an upgraded bundle busts the browser cache automatically.
Inline Package Assets
If your Content Security Policy forbids external scripts and styles, embed the assets directly in the dashboard HTML instead:
QUEUE_MONITOR_ASSET_MODE=inline
This adds no extra requests, but the chart library is re-sent on every load.
Public Static Assets
To serve the assets from your app's public directory (e.g. behind a CDN), publish the compiled assets:
php artisan vendor:publish --tag="queue-monitor-assets"
Then switch the dashboard to public asset mode:
QUEUE_MONITOR_ASSET_MODE=public
QUEUE_MONITOR_ASSET_URL=/vendor/queue-monitor
You can also change individual file names if your deployment pipeline fingerprints them:
// config/queue-monitor.php
'ui' => [
'assets' => [
'mode' => 'public',
'url' => '/build/queue-monitor',
'paths' => [
'css' => 'queue-monitor.abc123.css',
'echarts' => 'echarts.abc123.js',
'alpine' => 'alpine.abc123.js',
],
],
],
Full App-Level Override
For a fully custom dashboard build, publish the views and source asset files:
php artisan vendor:publish --tag="queue-monitor-views"
php artisan vendor:publish --tag="queue-monitor-asset-sources"
This publishes:
- Dashboard views to
resources/views/vendor/queue-monitor - Source CSS to
resources/vendor/queue-monitor/queue-monitor.css - A reference Tailwind config to
resources/vendor/queue-monitor/tailwind.config.js
Add the published dashboard views to your application's Tailwind content paths:
export default {
content: [
'./resources/views/**/*.blade.php',
'./resources/views/vendor/queue-monitor/**/*.blade.php',
],
};
Import the Queue Monitor source CSS from your app CSS entry:
@import "../vendor/queue-monitor/queue-monitor.css";
Install and bundle the browser libraries in your app build if your published view depends on them:
npm install alpinejs echarts
Then edit the published dashboard view to load your app bundle, for example with Vite:
@vite(['resources/css/app.css', 'resources/js/app.js'])
Finally, disable package asset rendering:
QUEUE_MONITOR_ASSET_MODE=none
Published views are owned by your application after publication. Republish or manually port upstream view changes when upgrading Queue Monitor.