Install alpine plugin

[ArtMin96]

How can I install alpine plugin in filament? If it was in a basic laravel project I would do it, but in Filament, I have no idea where to do it. I want to install this plugin: https://alpinejs.dev/plugins/intersect
I put this code in resources/js/app.js but no result:

import Alpine from 'alpinejs'
import intersect from '@alpinejs/intersect'

Alpine.plugin(intersect)

window.Alpine = Alpine

Alpine.start()

npm run dev

although I don't even know if this is right or not.

[danharrin]

Register it with alpine:init? Since we install Alpine for you

[ArtMin96]

I was just trying this. I know that alpine has been installed in filament and has its own app.js, the problem is how can I add a plugin?

[danharrin]

Follow the instructions as if Alpine was loaded via CDN

https://alpinejs.dev/plugins/intersect

[ArtMin96]

I wouldn't want to use CDN, but that option doesn't work either. I added this to the service provider but no change, the same console error

Filament::registerScripts([
    'https://unpkg.com/@alpinejs/intersect@3.x.x/dist/cdn.min.js',
]);

[danharrin]

Try

Filament::registerScripts([
    'https://unpkg.com/@alpinejs/intersect@3.x.x/dist/cdn.min.js',
], shouldBeLoadedBeforeCoreScripts: true);

[ArtMin96]

The console warning was cleared, but the problem was not resolved. If I add shouldBeLoadedBeforeCoreScripts: true to Filament::registerScripts, the alpine plugin (intersect) will load earlier than alpine js.

[ArtMin96]

[ArtMin96]

Imo, it is impossible to add a plugin at the moment because you have to register the plugin before Alpine.start().

In app.js

import Alpine from 'alpinejs'
// ...
import Tooltip from '@ryangjchandler/alpine-tooltip'
import intersect from '@alpinejs/intersect' // <- Push this

// ...
Alpine.plugin(Tooltip)
Alpine.plugin(intersect) // <- Push this

// ...

Alpine.start()

[C4NH4M]

Although this wasn't the problem I was facing, @ArtMin96 had helped me by pointing out where to add my plugin code as on the official docs all it says is:

You can install Collapse from NPM for use inside your bundle like so:

npm install @alpinejs/collapse

Then initialize it from your bundle:

import Alpine from 'alpinejs'
import collapse from '@alpinejs/collapse'

Alpine.plugin(collapse)
...

At no point does it explain where this is. In my case It was indeed in app.js

[a-coding-a]

It seems like you cannot? install an alpinejs plugin via NPM, instead we need to load it via the CDN script.