Skip to main content
The AssetManager class manages the generation and serving of Flux CSS and JavaScript assets. It handles both development and production builds, asset versioning, and CSP nonce support.

​
Overview

The AssetManager is primarily used internally by Flux, but its static methods can be accessed directly: 
use Flux\AssetManager;

// Generate script tags
echo AssetManager::scripts();
echo AssetManager::scripts(['nonce' => 'xyz123']);

​
Methods

​
boot()

Bootstrap the AssetManager. 
static function boot(): void
This method is called automatically by the service provider. It registers Blade directives and asset routes.

​
scripts()

Generate the Flux JavaScript script tag. 
public static function scripts($options = []): string
​
options
array
default:"[]"
Configuration optionsOptions:
  • nonce (string): CSP nonce value for the script tag
Returns: HTML script tag with proper versioning Behavior:
  • In production (app.debug = false): Serves minified version (flux.min.js)
  • In development (app.debug = true): Serves unminified version (flux.js)
  • Automatically detects Flux Pro vs Flux Lite
  • Includes data-navigate-once attribute for Livewire navigation
  • Adds version hash for cache busting
Example: 
// Basic usage
echo AssetManager::scripts();
// Output: <script src="/flux/flux.js?id=abc123" data-navigate-once></script>

// With CSP nonce
echo AssetManager::scripts(['nonce' => 'xyz123']);
// Output: <script src="/flux/flux.js?id=abc123" data-navigate-once nonce="xyz123"></script>

​
fluxAppearance()

Generate inline styles and scripts for dark mode support. 
public static function fluxAppearance($options = []): string
​
options
array
default:"[]"
Configuration optionsOptions:
  • nonce (string): CSP nonce value for inline style and script tags
Returns: HTML string with inline styles and scripts Features:
  • Sets color-scheme: dark in dark mode for proper scrollbar styling
  • Provides window.Flux.applyAppearance() function
  • Supports three appearance modes: 'light', 'dark', 'system'
  • Persists preference to localStorage (except for system mode)
  • Applies stored preference on page load to prevent flash
Example: 
echo AssetManager::fluxAppearance();

// With CSP nonce
echo AssetManager::fluxAppearance(['nonce' => 'xyz123']);
JavaScript API: 
// Change appearance mode
window.Flux.applyAppearance('dark');
window.Flux.applyAppearance('light');
window.Flux.applyAppearance('system');

​
editorStyles()

Generate the Flux editor CSS link tag (Flux Pro only). 
public static function editorStyles(): string
Returns: HTML link tag for editor CSS Throws: \Exception if Flux Pro is not installed Example: 
echo AssetManager::editorStyles();
// Output: <link rel="stylesheet" href="/flux/editor.css?id=abc123">

​
editorScripts()

Generate the Flux editor JavaScript script tag (Flux Pro only). 
public static function editorScripts(): string
Returns: HTML script tag with defer attribute Throws: \Exception if Flux Pro is not installed Behavior:
  • In production: Serves editor.min.js
  • In development: Serves editor.js
  • Includes version hash for cache busting
Example: 
echo AssetManager::editorScripts();
// Output: <script src="/flux/editor.js?id=abc123" defer></script>

​
Asset Routes

The AssetManager registers the following routes:
RouteDescriptionHandler
/flux/flux.jsDevelopment JavaScriptfluxJs()
/flux/flux.min.jsProduction JavaScriptfluxMinJs()
/flux/editor.cssEditor CSS (Pro only)editorCss()
/flux/editor.jsEditor JavaScript (Pro only)editorJs()
/flux/editor.min.jsEditor JavaScript minified (Pro only)editorMinJs()

​
Route Handlers

​
fluxJs()

Serve the development Flux JavaScript. 
public function fluxJs(): Response
Returns: File response with caching headers

​
fluxMinJs()

Serve the production (minified) Flux JavaScript. 
public function fluxMinJs(): Response
Returns: File response with caching headers

​
editorCss()

Serve the Flux editor CSS. 
public function editorCss(): Response
Returns: File response with caching headers Throws: \Exception if Flux Pro is not installed

​
editorJs()

Serve the development Flux editor JavaScript. 
public function editorJs(): Response
Returns: File response with caching headers Throws: \Exception if Flux Pro is not installed

​
editorMinJs()

Serve the production (minified) Flux editor JavaScript. 
public function editorMinJs(): Response
Returns: File response with caching headers Throws: \Exception if Flux Pro is not installed

​
Blade Directives

The AssetManager registers two Blade directives:

​
@fluxScripts

Render the Flux JavaScript assets. 
@fluxScripts
@fluxScripts(['nonce' => csp_nonce()])
Equivalent to: 
<?php app('livewire')->forceAssetInjection(); ?>
{!! app('flux')->scripts($expression) !!}

​
@fluxAppearance

Render the Flux appearance management scripts. 
@fluxAppearance
@fluxAppearance(['nonce' => csp_nonce()])
Equivalent to: 
{!! app('flux')->fluxAppearance($expression) !!}

​
Caching

All asset responses include aggressive caching headers:
  • Cache-Control: public, max-age=31536000 (1 year)
  • Expires: 1 year from request time
  • Last-Modified: File modification timestamp
  • 304 Not Modified: Returned when If-Modified-Since matches

​
Version Hashing

Assets use version hashes from the manifest file for cache busting: 
// Example manifest.json
{
  "/flux.js": "abc123def456",
  "/editor.js": "xyz789uvw012"
}
These hashes ensure that when assets change, browsers fetch the new version.

​
Content Security Policy (CSP)

All asset generation methods support CSP nonces: 
$nonce = csp_nonce(); // Your CSP nonce generation

echo AssetManager::scripts(['nonce' => $nonce]);
echo AssetManager::fluxAppearance(['nonce' => $nonce]);
In Blade templates: 
@fluxScripts(['nonce' => csp_nonce()])
@fluxAppearance(['nonce' => csp_nonce()])

​
Examples

​
Basic Layout

<!DOCTYPE html>
<html>
<head>
    @fluxAppearance
</head>
<body>
    {{ $slot }}

    @fluxScripts
</body>
</html>

​
With CSP Nonces

<!DOCTYPE html>
<html>
<head>
    @fluxAppearance(['nonce' => csp_nonce()])
</head>
<body>
    {{ $slot }}

    @fluxScripts(['nonce' => csp_nonce()])
</body>
</html>

​
Flux Pro Editor

<!DOCTYPE html>
<html>
<head>
    {!! AssetManager::editorStyles() !!}
</head>
<body>
    {{ $slot }}

    {!! AssetManager::editorScripts() !!}
</body>
</html>

Build docs developers (and LLMs) love

Get started for freeTalk to us