Filament•15mo ago

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()

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>

    @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

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';

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 ?

3 Replies

ChesterS•15mo ago

FWIW, I have both of those

@livewireScriptConfig
@filamentScripts

@livewireScriptConfig
@filamentScripts

and it seems to work fine. I'm using the latest versions for everything.

icoOP•15mo ago

i was also (in the beginning) but that results in multiple warnings in the console and resulting in Alpine syntax not rendering correctly

Remi Hindriks•9mo ago

Did you ever solve this? Im running in to the same issue

Gaming

Programming

Filament V3 and Livewire V3 scripts