stuartcusack
stuartcusack
FFilament
Created by stuartcusack on 5/29/2024 in #❓┊help
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.
1 replies