FilamentF
Filament•3y ago
Vinny

Issues with using custom JS scripts

Hello, I am using table builder v3 and I am having 3 main problems when trying to use some custom Alpine javascript with filament.

  1. If the body in my app.blade.php looks like this (below) then when I try to use the search feature on the table builder, I get **no errors in the console** but **the animation "breaks" where the spinner on the search bar of the table spins infinitely** even if the search has finished running. ```php<body class="antialiased bg-white text-black dark:bg-gray-900 dark:text-white">{{ $slot }}@filamentScripts@livewireScriptConfig@vite('resources/js/app.js')</body>```
  2. The issue fixes itself if the body part in my app.blade.php file looks like this (below). If I do this, I get **no issues with the table animations** but **my app.js script doesn't work correctly** (eg: it cannot load $persist from alpine through livewire because the @livewireScriptConfig tag is missing). This also gives me **errors in the console** where it says that I have multiple instances of livewire and alpine running.```php<body class="antialiased bg-white text-black dark:bg-gray-900 dark:text-white">{{ $slot }}@filamentScripts@vite('resources/js/app.js')</body>```
  3. I could remove the custom script tag but then I **lose all javascript functionality within my page**.
Here is my app.js script:
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

document.addEventListener('alpine:init', () => {
    Alpine.store('sidebar', {
        isOpen: Alpine.$persist(true).as('sidebar_isOpen'),
        close() {
            this.isOpen = false;
        },
        toggle() {
            this.isOpen = !this.isOpen
        }
    })

    Alpine.store('darkMode', {
        on: Alpine.$persist(true).as('darkMode_on'),
        toggle() {
            this.on = !this.on;
        }
    })
})

Livewire.start()
Was this page helpful?