Skip to content

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.