Filament•8mo ago

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 HindriksOP•8mo ago

Everything seems to work, but all the loading spinners are visible. This is what i see when i open the filters

Jyrki•6mo 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'])

Gaming

Programming

using @livewireScriptConfig instead of @filamentScripts