Filament•16mo ago

Using Filament V3 packages outside Filament context (public page) with Vite bundle

Hey everyone! I'm trying to use Form builder in a public page, and I have a Vite bundle with JS compilation. In a Repeater Field, I setup a confirmation for the delete, and it's not doin its thing. I just click and nothing happens. I assume it's emitting an event that is not caught by anything. I do have the Blade Directives @filamentScripts, and it's loading them from the public folder, which expect window.Alpine, and I do put it there in the app.js folder.

import {Livewire, Alpine} from '../../vendor/livewire/livewire/dist/livewire.esm'
window.Alpine = Alpine

import {Livewire, Alpine} from '../../vendor/livewire/livewire/dist/livewire.esm'
window.Alpine = Alpine

So, what am I missing here? Thanks!!

10 Replies

toeknee•16mo ago

Check your console log

Patrick Boivin•16mo ago

Hi @patriciooncode, did you include <x-filament-actions::modals /> outside of the <form> tag?

PatricioOP•16mo ago

empty Indeed I was not putting them 🤦‍♂️ They work! this raises another question regarding this I tried to put it before form tag closing, and it did not work

PatricioOP•16mo ago

I assume because it's not in a LW component context

Patrick Boivin•16mo ago

Yes, I'm not sure it can exist inside of the form

PatricioOP•16mo ago

Patrick Boivin•16mo ago

Oooh, teleport 👌

PatricioOP•16mo ago

So, I put it side by side with the form, teleporting to the right place, because of appearance Question is not needed for now BUT.... Would I need to repeat this component if 2 forms on same page? The blade file, complete:

<div>
    <form x-init wire:submit.prevent="submit">

        {{ $this->form }}

        <x-filament::button
            type="submit"
            color="primary"
            class="mt-12 "
        >
            Submit
        </x-filament::button>
    </form>

    @teleport('body')
    <x-filament-actions::modals />
    @endteleport
</div>

<div>
    <form x-init wire:submit.prevent="submit">

        {{ $this->form }}

        <x-filament::button
            type="submit"
            color="primary"
            class="mt-12 "
        >
            Submit
        </x-filament::button>
    </form>

    @teleport('body')
    <x-filament-actions::modals />
    @endteleport
</div>

this is of 1 LW component with a Filament form I will need a 2nd form soon... just not sure how this would work would this modeals component "catch" the event from both forms?

Patrick Boivin•16mo ago

I'm not 100% sure, but I think just one time on a page, even if you have multiple forms.

Gaming

Programming

Using Filament V3 packages outside Filament context (public page) with Vite bundle