Any alternative way to load filament forms? (caching issues)

So I have a website that uses Livewire and Alpine. The original setup was like this: layout.blade.php (before)

        @vite(['resources/css/site.css', 'resources/js/site.js'])
        @livewireStyles 
    </head>

       @livewireScriptConfig
    </body>
</html>

        @vite(['resources/css/site.css', 'resources/js/site.js'])
        @livewireStyles 
    </head>

       @livewireScriptConfig
    </body>
</html>

site.js (before)

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import intersect from '@alpinejs/intersect';
import LogoCarousel from './components/alpine/LogoCarousel.js';

Alpine.plugin(intersect);
Alpine.data('logoCarousel', LogoCarousel);

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import intersect from '@alpinejs/intersect';
import LogoCarousel from './components/alpine/LogoCarousel.js';

Alpine.plugin(intersect);
Alpine.data('logoCarousel', LogoCarousel);

I decided to try filament forms builder in this site. I removed Livewire / Alpine imports because filament provides these: layout.blade.php (after)

        @filamentStyles
        @vite('resources/css/site.css')
    </head>

       @filamentScripts
       @vite('resources/js/site.js')
    </body>
</html>

        @filamentStyles
        @vite('resources/css/site.css')
    </head>

       @filamentScripts
       @vite('resources/js/site.js')
    </body>
</html>

site.js (after)

import intersect from '@alpinejs/intersect';
import LogoCarousel from './components/alpine/LogoCarousel.js';

Alpine.plugin(intersect);
Alpine.data('logoCarousel', LogoCarousel);

import intersect from '@alpinejs/intersect';
import LogoCarousel from './components/alpine/LogoCarousel.js';

Alpine.plugin(intersect);
Alpine.data('logoCarousel', LogoCarousel);

This all worked fine locally, but when I deployed to a server, where static caching is enabled (provided by Statamic CMS) none of my Alpine components worked after the first load (things get cached then). Uncaught ReferenceError: Alpine is not defined I've tried things like:

document.addEventListener('alpine:init', () => {
    Alpine.plugin(intersect);
    Alpine.data('dynamicForm', DynamicForm);
});

document.addEventListener('alpine:init', () => {
    Alpine.plugin(intersect);
    Alpine.data('dynamicForm', DynamicForm);
});

but again, the event only gets fired on the first load, not when cached. So it looks like I will abandon trying to integrate Filament Forms into a Statamic site, but I'm wondering if there is an alternative way to import Filament Forms? Something along the lines of a more standard Livewire / Alpine installation. Any other ideas would be appreciated! Thank you.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Any alternative way to load filament forms? (caching issues)