adding alpinejs plugin into panel

Is there any article/doc about adding alpinejs plugins into filament app(not plugin), ideally to be able to lazy load

7 Replies

wyChoongOP•11mo ago

For example, I want to use this https://github.com/marcreichel/alpine-auto-animate in the panel. How would I add it and use it with lazy load(only load when I need to use it for the page)

GitHub

GitHub - marcreichel/alpine-auto-animate: Alpine.js wrapper for @fo...

Alpine.js wrapper for @formkit/auto-animate. Contribute to marcreichel/alpine-auto-animate development by creating an account on GitHub.

toeknee•11mo ago

Wouldn't you build this into the vite builder for a custom theme?

wyChoongOP•11mo ago

Currently in my panel.js

import AutoAnimate from '@marcreichel/alpine-auto-animate';

document.addEventListener('alpine:init', () => {
    window.Alpine.plugin(AutoAnimate)
})

import AutoAnimate from '@marcreichel/alpine-auto-animate';

document.addEventListener('alpine:init', () => {
    window.Alpine.plugin(AutoAnimate)
})

It works but the whole thing is shipped in every pages

toeknee•11mo ago

So use the vite assets? https://filamentphp.com/community/modrictin-include-vite-built-js-and-css-files-in-your-project

Filament

How to include Vite built files in your Filament project by Tin Mod...

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.

toeknee•11mo ago

Condition the pages you want it in I believe would be correct

wyChoongOP•11mo ago

Are you suggesting to split into autoanimate.js and include in the specific blade file That could work

toeknee•11mo ago

Yep

Gaming

Programming

adding alpinejs plugin into panel