F
Filament•9mo ago
Nicole

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
Vp•9mo ago
Nicole
NicoleOP•9mo 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
Vp•9mo 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
Dan Harrin•9mo 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\')'),
        );
}

Did you find this page helpful?