Filament•14mo ago

Problems using Volt

Can I use filament stuff with Volt? For example. Im in a view where I show a filament table. then i move to another page (via volt request) where i have another filament table. and now i get this errors in the browser dev console. then js stops working/doesnt work fine

8 Replies

ericmpOP•14mo ago

note that if i do full page requests all works like a charm

thedangler•11mo ago

How did you get filament table to load in a livewire volt thats rendered inside a page. All I get are errors about the class needing to be abstract...

ericmpOP•11mo ago

i created a table component and i did put it inside an existing livewire component if i remember well

toeknee•11mo ago

This sounds like the lviewire component has loaded after the dom so it wouldn't work. Can you preload it in volt?

ericmpOP•11mo ago

in november i switched to admin panel, so idk now, the code is different and works

thedangler•11mo ago

Volt with Filament will be so nice.

Nano•9mo ago

Just saw your comment while looking if it's been done, I think it just actually works

<?php
use function Livewire\Volt\{mount, state, computed};
use App\Models\Schematic;
use function Laravel\Folio\name;
use Illuminate\Support\Facades\Cache;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\MarkdownEditor;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Illuminate\Contracts\View\View;
use Livewire\Volt\Component;

new class extends Component implements HasForms {
    use InteractsWithForms;
    public $shortId;
    public $schematicBase64;
    public ?array $data = [];

    public function mount($shortId)
    {
        $cacheKey = Cache::get("schematic-temporary-short-links:{$shortId}");
        if (!$cacheKey) {
            $this->redirect('/schematics');
        }
        $schematicFile = Cache::get($cacheKey);
        $this->schematicBase64 = base64_encode($schematicFile);
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('title')->required(),
                MarkdownEditor::make('content'),
                // ...
            ])
            ->statePath('data');
    }
    public function create(): void
    {
        dd($this->form->getState());
    }
};
?>


<x-app-layout>
    @volt
        <div class="max-w-7xl mx-auto">
            {{ $shortId }}
            <x-schematic-renderer :base64="$schematicBase64" wire:key="schematic-renderer-{{ $shortId }}" />
            <form wire:submit="create">
                {{ $this->form }}

                <button type="submit">
                    Submit
                </button>
            </form>
        </div>
    @endvolt
</x-app-layout>

<?php
use function Livewire\Volt\{mount, state, computed};
use App\Models\Schematic;
use function Laravel\Folio\name;
use Illuminate\Support\Facades\Cache;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\MarkdownEditor;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Illuminate\Contracts\View\View;
use Livewire\Volt\Component;

new class extends Component implements HasForms {
    use InteractsWithForms;
    public $shortId;
    public $schematicBase64;
    public ?array $data = [];

    public function mount($shortId)
    {
        $cacheKey = Cache::get("schematic-temporary-short-links:{$shortId}");
        if (!$cacheKey) {
            $this->redirect('/schematics');
        }
        $schematicFile = Cache::get($cacheKey);
        $this->schematicBase64 = base64_encode($schematicFile);
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('title')->required(),
                MarkdownEditor::make('content'),
                // ...
            ])
            ->statePath('data');
    }
    public function create(): void
    {
        dd($this->form->getState());
    }
};
?>


<x-app-layout>
    @volt
        <div class="max-w-7xl mx-auto">
            {{ $shortId }}
            <x-schematic-renderer :base64="$schematicBase64" wire:key="schematic-renderer-{{ $shortId }}" />
            <form wire:submit="create">
                {{ $this->form }}

                <button type="submit">
                    Submit
                </button>
            </form>
        </div>
    @endvolt
</x-app-layout>

Using the volt class based component I had no issue integrating the example

ericmpOP•9mo ago

u can use spa mode https://filamentphp.com/docs/3.x/panels/configuration#spa-mode

Gaming

Programming

Problems using Volt