FilamentF
Filament•3y ago
ico

Filament V3 and Livewire V3 scripts

After a followed the upgrade guide for livewire i moved to the upgrade guide of filament.
The Livewire guide told me that i can use the app.js like: 
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

// import and add other plugins to Alpine using Alpine.plugin(plugin_name) method

Livewire.start()

Then all i need to do in the base layout is to replace the @livewireScripts with @livewireScriptConfig
    @livewire('notifications')
    @livewireScriptConfig

</body>


Then in the filament upgrade guide they say

New @filamentScripts and @filamentStyles Blade directives

The @filamentScripts and @filamentStyles Blade directives must be added to your Blade layout file/s. Since Livewire v3 no longer uses similar directives, you can replace @livewireScripts with @filamentScripts and @livewireStyles with @filamentStyles

The styles i have replaced the and removed from app.css but the JS scripts are a little different..... since they say that i don't need the imports
import FormsAlpinePlugin from '../../vendor/filament/forms/dist/module.esm';
import NotificationsAlpinePlugin from '../../vendor/filament/notifications/dist/module.esm';

from the app.js and they are loaded in the @filamentScripts

Now i am puzzeled since witch to use since adding both ( @filamentScripts and @@livewireScriptConfig) at the end of the layout results into multiple alpine livewire starts warnings and errors.

So i removed almost everything related to livewire and alpine from the the app.js and replaced the new @livewireScriptConfig with @filamentScripts

Is this how it should be ?
Won't i be missing some scripts that Livewire uses or everything will be loaded by the @filamentScripts ?
What if i want to add a Alpine plugin how should i do that ?
Was this page helpful?