Filament•14mo ago

Creating stand-alone livewire component using filament form

I'm attempting to create a livewire component with a filament form in it (that bit is fine) - and then using a route to get to the component directly. Unfortunately, despite creating a layout specifically for this purpose and pointing to it, it includes livewire and filament includes, the wizard I'm attempting to show is still missing some vital component to make it render correctly. How would I go about finding out what it is? This is the contents of the new blade - of which I have confirmed is being used.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">

    <meta name="application-name" content="{{ config('app.name') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ config('app.name') }}</title>

    <style>[x-cloak] { display: none !important; }</style>
    @livewireStyles
    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body class="antialiased">
{{ $slot }}

@livewire('notifications')

@livewireScripts
@filamentScripts
@vite('resources/js/app.js')
<script src="//unpkg.com/alpinejs" defer></script>
</body>
</html>

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">

    <meta name="application-name" content="{{ config('app.name') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ config('app.name') }}</title>

    <style>[x-cloak] { display: none !important; }</style>
    @livewireStyles
    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body class="antialiased">
{{ $slot }}

@livewire('notifications')

@livewireScripts
@filamentScripts
@vite('resources/js/app.js')
<script src="//unpkg.com/alpinejs" defer></script>
</body>
</html>

1 Reply

SirFatOP•14mo ago

Further to this - I tracked down the panel's base.blade.php and copied the necessary items from there into my custom layout. There likely is a more formal way, but this worked. OK - this did not solve it, because while using a layout does allow the CSS and Scripts for filament/livewire to be accessible, because it's a layout and not something called via 'view', it isn't evaluated to populate any of the properties (such as $title for example) in the layout file. Route:

Route::get('/signup', OnlineSignup::class);

Route::get('/signup', OnlineSignup::class);

Render Function:

    public function render(): View
    {
        return view('livewire.online-signup')->layout('components.layouts.signup');
    }

    public function render(): View
    {
        return view('livewire.online-signup')->layout('components.layouts.signup');
    }

` I can get the heading which is set within the page using:

@props([
    'heading' => $this->getHeading(),
    'subheading' => $this->getSubheading(),
])

@props([
    'heading' => $this->getHeading(),
    'subheading' => $this->getSubheading(),
])

But this still seems the incorrect approach as there would be any number of variables (such as $title for example) - that would need to be correctly populated for the page to show. Have I taken a wrong turn? Is there another way to show a livewire component that uses the form builder in a direct (unauthenticated) route?

Gaming

Programming

Creating stand-alone livewire component using filament form