Filament•2y ago

how to use alpine js floating ui in livewire3?

Hi, I'm having a hard time to get @awcodes /alpine-floating-ui to work in livewire3 app... Included the cdn and nothing happen

Solution:

no problem, I inspected filament's and see this ``` // app.js ...

Jump to solution

6 Replies

awcodes•2y ago

how are you including it in your JS?

Solution

Ricardo Sawir•2y ago

no problem, I inspected filament's and see this

// app.js

// this doesnt work
import Alpine from alpinejs
window.Alpine = Alpine
window.Alpine.plugin(AlpineFloatingUI)

// this works
window.addEventListener('alpine:init', () => {
window.Alpine.plugin(AlpineFloatingUI)
})

// app.js

// this doesnt work
import Alpine from alpinejs
window.Alpine = Alpine
window.Alpine.plugin(AlpineFloatingUI)

// this works
window.addEventListener('alpine:init', () => {
window.Alpine.plugin(AlpineFloatingUI)
})

Ricardo SawirOP•2y ago

I wish this gets documented though

awcodes•2y ago

It’s probably noted in the livewire upgrade guide since alpine is part of livewire now. Haven’t had time to even look at the plugin from a livewire standpoint.

Ricardo SawirOP•2y ago

https://livewire.laravel.com/docs/upgrading#including-plugins-via-a-script-tag found it

Laravel

Upgrade Guide | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

Ricardo SawirOP•2y ago

it's actually included by default

Gaming

Programming

how to use alpine js floating ui in livewire3?

Did you find this page helpful?