How can I add alpine plugin to my filament plugin?

I have the following js file:

import sort from '@alpinejs/sort'
document.addEventListener('alpine:init', () => {
    window.Alpine.plugin(sort)
})

export default function widgetList({ options }) {
    return {

    };
}

import sort from '@alpinejs/sort'
document.addEventListener('alpine:init', () => {
    window.Alpine.plugin(sort)
})

export default function widgetList({ options }) {
    return {

    };
}

blade:

<x-filament-widgets::widget>
    <x-filament::section>
        <div
            x-ignore
            ax-load
            ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('widget-list', 'thethunderturner/widget-list') }}"
            x-data="widgetList({
                    options: @js($options),
                })">
            <ul x-sort>
                <li x-sort:item>foo</li>
                <li x-sort:item>bar</li>
                <li x-sort:item>baz</li>
            </ul>
        </div>
    </x-filament::section>
</x-filament-widgets::widget>

<x-filament-widgets::widget>
    <x-filament::section>
        <div
            x-ignore
            ax-load
            ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('widget-list', 'thethunderturner/widget-list') }}"
            x-data="widgetList({
                    options: @js($options),
                })">
            <ul x-sort>
                <li x-sort:item>foo</li>
                <li x-sort:item>bar</li>
                <li x-sort:item>baz</li>
            </ul>
        </div>
    </x-filament::section>
</x-filament-widgets::widget>

However, the list doesnt sort? For some reason it seems the plugin is not applied. What am I missing?

3 Replies

MatthewOP•4mo ago

This is my app.js in my laravel test app

import './bootstrap';

import Alpine from 'alpinejs'
import {sort} from "@alpinejs/sort";

Alpine.plugin(sort)
window.Alpine = Alpine

Alpine.start()

import './bootstrap';

import Alpine from 'alpinejs'
import {sort} from "@alpinejs/sort";

Alpine.plugin(sort)
window.Alpine = Alpine

Alpine.start()

Im also running npm run dev, and elemets are stil not draggable

MatthewOP•4mo ago

As outlines in the docs here: https://filamentphp.com/docs/2.x/tables/installation#configuring-scripts

Installation - Table Builder - Filament

MatthewOP•4mo ago

Anyone?

Gaming

Programming

How can I add alpine plugin to my filament plugin?