F
Filament•12mo ago
Remi Hindriks

using @livewireScriptConfig instead of @filamentScripts

I'm using the tables package in livewire components. I'm using an extra Alpine plugin. So following the Livewire docs in my app.js i added 
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
Alpine.directive('tooltip', (el) => {
    tippy(el, { content: el.textContent });
});

Livewire.start()
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
Alpine.directive('tooltip', (el) => {
    tippy(el, { content: el.textContent });
});

Livewire.start()
In order to not get 2 instances of Livewire i need to add @livewireScriptConfig But now the loading indicator in my searchbar of my table is constantly spinning. Am i doing something wrong?
2 Replies
Remi Hindriks
Remi HindriksOP•12mo ago
Everything seems to work, but all the loading spinners are visible. This is what i see when i open the filters
No description
Jyrki
Jyrki•9mo ago
I fixed it by loading my plugin like (should also work for a custom directive), so ignoring the Livewire docs 
import sort from '@alpinejs/sort'

document.addEventListener('alpine:init', () => {
    window.Alpine.plugin(sort)
})
import sort from '@alpinejs/sort'

document.addEventListener('alpine:init', () => {
    window.Alpine.plugin(sort)
})
And with this in my blade file 
@filamentScripts
@vite(['resources/js/app.js'])
@filamentScripts
@vite(['resources/js/app.js'])

Did you find this page helpful?