Custom async alpine component field with vite and without panel

I have an existing laravel installation with filament components (without the panel builder). Now I want to add a custom field with an async alpine component and do not want to install esbuild since I already have vite. In my

app.js

app.js

file i register the component.

import {Livewire, Alpine} from '../../vendor/livewire/livewire/dist/livewire.esm';
import AsyncAlpine from 'async-alpine';
import './bootstrap'

Alpine.plugin(AsyncAlpine);
Alpine.asyncData('tselect', () => {
    console.log('loading typesense select')
    return import("./filament/typesense-select.js");
});
Livewire.start()

import {Livewire, Alpine} from '../../vendor/livewire/livewire/dist/livewire.esm';
import AsyncAlpine from 'async-alpine';
import './bootstrap'

Alpine.plugin(AsyncAlpine);
Alpine.asyncData('tselect', () => {
    console.log('loading typesense select')
    return import("./filament/typesense-select.js");
});
Livewire.start()

My base layout file ends with

@livewireScriptConfig
@filamentScripts
@vite([
'resources/js/app.js',
])
</body>

@livewireScriptConfig
@filamentScripts
@vite([
'resources/js/app.js',
])
</body>

But when initializing the component with the following code

    <div
        x-load
        x-data="tselect"></div>

    <div
        x-load
        x-data="tselect"></div>

I get the error that

tselect

tselect

is not defined. When I remove the

@filamentScripts

@filamentScripts

the async component loads. Does anyone has an Idea how to get this working?

Custom async alpine component field with vite and without panel

app.js

app.js

file i register the component.

import {Livewire, Alpine} from '../../vendor/livewire/livewire/dist/livewire.esm';
import AsyncAlpine from 'async-alpine';
import './bootstrap'

Alpine.plugin(AsyncAlpine);
Alpine.asyncData('tselect', () => {
    console.log('loading typesense select')
    return import("./filament/typesense-select.js");
});
Livewire.start()

import {Livewire, Alpine} from '../../vendor/livewire/livewire/dist/livewire.esm';
import AsyncAlpine from 'async-alpine';
import './bootstrap'

Alpine.plugin(AsyncAlpine);
Alpine.asyncData('tselect', () => {
    console.log('loading typesense select')
    return import("./filament/typesense-select.js");
});
Livewire.start()

My base layout file ends with

@livewireScriptConfig
@filamentScripts
@vite([
'resources/js/app.js',
])
</body>

@livewireScriptConfig
@filamentScripts
@vite([
'resources/js/app.js',
])
</body>

But when initializing the component with the following code

    <div
        x-load
        x-data="tselect"></div>

    <div
        x-load
        x-data="tselect"></div>

I get the error that

tselect

tselect

is not defined. When I remove the

@filamentScripts

@filamentScripts

the async component loads. Does anyone has an Idea how to get this working?

Custom async alpine component field with vite and without panel

Similar Threads

Custom async alpine component field with vite and without panel

Similar Threads

Similar Threads

Similar Threads