Filament•16mo 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•16mo ago

how are you including it in your JS?

Solution

Ricardo Sawir•16mo 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•16mo ago

I wish this gets documented though

awcodes•16mo 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•16mo 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•16mo ago

it's actually included by default

Gaming

Programming

how to use alpine js floating ui in livewire3?