Filament•6mo ago

How can Filament access app.js?

I have a Livewire component that uses SortableJS. Now, I want to use this component within my product view resource. I was able to do this, but the JavaScript located in app.js didn't load.

4 Replies

Vp•6mo ago

You can register like this https://filamentphp.com/docs/3.x/support/assets#registering-javascript-files

Assets - Core Concepts - Filament

NicoleOP•6mo ago

import './bootstrap';
import sortable from './sortable'
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

Alpine.plugin(sortable)

// Livewire.start()

import './bootstrap';
import sortable from './sortable'
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

Alpine.plugin(sortable)

// Livewire.start()

How can I register my Apline plugin, Sir?

Vp•6mo ago

They explain here https://filamentphp.com/docs/3.x/support/assets#asynchronous-alpinejs-components But I've never try so don't know whether it should work or not

Dan Harrin•6mo ago

this is for components and not plugins you shouldnt need to import the livewire js, its already on every page the simplest way to output app.js is with a render hook like

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->renderHook(
            PanelsRenderHook::BODY_START,
            fn (): string => Blade::render('@vite(\'resources/js/app.js\')'),
        );
}

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->renderHook(
            PanelsRenderHook::BODY_START,
            fn (): string => Blade::render('@vite(\'resources/js/app.js\')'),
        );
}

Gaming

Programming

How can Filament access app.js?