F
Filament•2y ago
ericmp

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
No description
8 Replies
ericmp
ericmpOP•2y ago
note that if i do full page requests all works like a charm
thedangler
thedangler•16mo 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...
ericmp
ericmpOP•15mo ago
i created a table component and i did put it inside an existing livewire component if i remember well
toeknee
toeknee•15mo ago
This sounds like the lviewire component has loaded after the dom so it wouldn't work. Can you preload it in volt?
ericmp
ericmpOP•15mo ago
in november i switched to admin panel, so idk now, the code is different and works
thedangler
thedangler•15mo ago
Volt with Filament will be so nice.
Nano
Nano•14mo 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
ericmp
ericmpOP•14mo ago

Did you find this page helpful?