How to import Alpine in custom script

I would like to extract an Alpine.data() component to a separate js file located in resources/js/filament/app.js.

FilamentAsset::register([
    Js::make('custom-script', resource_path('/js/filament/admin/app.js')),
]);

FilamentAsset::register([
    Js::make('custom-script', resource_path('/js/filament/admin/app.js')),
]);

The problem is the import Alpine from 'alpinejs' I get a browser error. Presumably because it's not being compiled and just copied across to the public folder. Am I missing something here...?

Solution:

use ```js document.addEventListener('alpine:init', () => { //your code.. })...

Jump to solution

6 Replies

gladjanus43•4w ago

maybe php artisan filament:assets?

HarveyOP•4w ago

Already using that command. Unfortunately, just copies it to the public folder.

LeandroFerreira•4w ago

I think you don't need to import alpine again.. what are you doing in the app.js?

HarveyOP•4w ago

Alpine.data('popup', () => ({
    open: false,
}));

Alpine.data('popup', () => ({
    open: false,
}));

Solution

LeandroFerreira•4w ago

use

document.addEventListener('alpine:init', () => {
//your code..
})

document.addEventListener('alpine:init', () => {
//your code..
})

HarveyOP•4w ago

Well the error is gone... so I think this was it thanks😄 Will accept it once I test it Cheers, all working.

Gaming

Programming

How to import Alpine in custom script