Filament•3y ago•

3 replies

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

@livewireScripts

with

@livewireScriptConfig

@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

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

app.js

and they are loaded in the

@filamentScripts

@filamentScripts

Now i am puzzeled since witch to use since adding both (

@filamentScripts

@filamentScripts

and

@@livewireScriptConfig

@@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

app.js

and replaced the new

@livewireScriptConfig

@livewireScriptConfig

with

@filamentScripts

@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

@filamentScripts

?
What if i want to add a Alpine plugin how should i do that ?

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

@livewireScripts

with

@livewireScriptConfig

@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

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

app.js

and they are loaded in the

@filamentScripts

@filamentScripts

Now i am puzzeled since witch to use since adding both (

@filamentScripts

@filamentScripts

and

@@livewireScriptConfig

@@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

app.js

and replaced the new

@livewireScriptConfig

@livewireScriptConfig

with

@filamentScripts

@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

@filamentScripts

?
What if i want to add a Alpine plugin how should i do that ?

Filament V3 and Livewire V3 scripts

Filament V3 and Livewire V3 scripts

Similar Threads

Similar Threads

Similar Threads