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: Inline Package Assets

By default, the dashboard reads precompiled files from the installed package and inlines them into the Blade view:

QUEUE_MONITOR_ASSET_MODE=inline

This is the zero-setup mode and works without publishing assets.

Public Static Assets

If your Content Security Policy disallows inline CSS or JavaScript, 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.