Using Alpine Headless Listbox within a Livewire environment

[robdekort]

Hello there. I'm trying to use the Headless Listbox component as per this example: https://alpinejs.dev/component/headless-listbox

However, I'm working in a Livewire environment so my bundle looks like this:

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm'
import precognition from 'laravel-precognition-alpine'
import ui from '@alpinejs/ui'

Alpine.plugin(precognition, ui)
Livewire.start()

Livewire and basic components work just fine. However with the listbox I get the following errors: ReferenceError: Can't find variable: $listboxOption

I'm wondering how to load in the Alpine Components properly to prevent this from happening. If anyone has any thoughts, much appreciated.

[ekwoka]

To me this seems like none of the plugins are activating.

Which might be more appropriate on the Livewire repo.

Are you possibly not removing the livewire scripts tag or whatever it is?

[robdekort]

Thanks for your answer, much appreciated. Nope, as on the same page livewire itself works.

[robdekort]

And so do other custom alpine components.

[ekwoka]

So you are or are not removing livewire scripts?

Don't you need to remove livewire scripts to separately activate alpine?

It's a livewire issue though.

[robdekort]

I do the scriptsConfig thing if that's what you mean?

[robdekort]

I'll move it to Livewire though. Thanks.