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

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'

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

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

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

Filament•16mo ago•

9 replies

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

resources/js/filament/app.js

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'

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

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

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