Asset & Init System

The dashboard frontend is shipped as static assets under public/assets — there is no Vite/Webpack build for the platform layer. A small artisan step compiles per-feature "init" scripts and translations, and a runtime init() bootstrap attaches them to any element that carries an init="..." attribute. This page is the canonical reference for how JavaScript widgets get wired up.

Enabling a widget with init

You rarely call JavaScript directly. Instead you mark an element with an init attribute naming the initializer to run, and the bootstrap does the rest:

<input type="text" name="color" init="coloris" />

• The init value is space-separated, so one element can run several: init="tomselect sortable".
• Pass options to an initializer through attributes prefixed with its name, e.g. sortable-animation="300" for the sortable init. Each init's page lists the options it reads.
• Initialization runs automatically on page load and whenever new markup is added to the page (Livewire/AJAX content included) — you never call it manually.

Most of the time you don't even write the init attribute yourself: the JS-backed components (date picker, select, rich editor, uploader, …) add it for you.

Available initializers

Each has its own page with the options it accepts:

• Apex Chart — charts
• Coloris — colour picker
• HugeRTE — rich text editor
• Icon Picker
• Overlay Scrollbars — slim overlay scrollbars
• Query Builder
• Repeater
• Sortable — drag-to-reorder
• Tempus Dominus — date/time picker
• Tom Select — enhanced selects
• Turnstile — Cloudflare captcha
• Uploader

Loading a widget's vendor files

Components load the third-party scripts and styles their widget needs. If you put an init attribute on your own markup instead, include the matching <x-assets.*> component so those files are on the page:

<x-assets.tom-select />

<select name="status" init="tomselect">
    <option value="draft">{{ __('Draft') }}</option>
    <option value="published">{{ __('Published') }}</option>
</select>

Each asset component adds its files only once per page, no matter how many times it's rendered. Available asset components:

• <x-assets.apexcharts /> — ApexCharts.
• <x-assets.cloudflare-turnstile /> — Cloudflare Turnstile and its site-key meta tag.
• <x-assets.coloris /> — Coloris colour picker.
• <x-assets.hugerte /> — HugeRTE rich-text editor.
• <x-assets.query-builder /> — the query builder, plus Tom Select and Tempus Dominus.
• <x-assets.redot-icon-picker /> — the icon picker plugin and its modal template.
• <x-assets.redot-repeater /> — the repeater plugin.
• <x-assets.redot-toasts /> — the toasts plugin.
• <x-assets.redot-uploader /> — the uploader plugin.
• <x-assets.tabler-flags /> — Tabler flag styles.
• <x-assets.tabler-socials /> — Tabler social icon styles.
• <x-assets.tempus-dominus /> — Tempus Dominus date picker.
• <x-assets.tom-select /> — Tom Select.

Cache-busting assets

Reference any file under public/ with the hashed_asset() helper instead of asset(). It appends a version query string that changes whenever the file changes, so browsers always pick up edits:

<link rel="stylesheet" href="{{ hashed_asset('assets/css/app.css') }}">
<script src="{{ hashed_asset('assets/js/app.js') }}"></script>

Automatic rebuilds

The compiled output in public/assets/dist is generated, never edited by hand. In development you don't run a build step: a middleware checks whether any source init script or translation file has changed and regenerates dist/ on the next request. To force a rebuild manually, run:

php artisan dependencies:build

Adding a new initializer

1. Create public/assets/inits/my-widget.js whose last statement returns the initializer function:

   return (selector, options = {}) => {
       const instance = new MyWidget($(selector).get(0), options);
       $(selector).data('myWidget', instance);
   };

2. Use it from Blade: <div init="my-widget" mywidget-animation="300"></div>.

3. The next request rebuilds dist/ and your initializer is live as init="my-widget".

Gotchas

• Never edit public/assets/dist/* by hand — it is regenerated. Edit the source public/assets/inits/*.js and lang/* files instead.
• An element is initialized only once. If you re-render it and need it re-initialized, render fresh markup rather than reusing an already-initialized element.

Related

• Components overview — components that use init for you.
• JS Translations — the __() helper for localized JS strings.
• Helpers — hashed_asset() and related helpers.