Filament•3w ago

Guest pages using the filament layout.

Hello people, I searched the channel again and again. Although some people insinuated that they found the solution and where asking for details, I didn't manage to have any progress on that. I want to make a page, (ideally with a form) to be shown when the user navigates to /message and not to /admin/message. I want the page to use the guest middleware and not forcing the user to login. Also I want to use the css filament uses for showing all the good stuff it shows. Right now I have in my web.php

 Route::get('/page', function(){
        return view('custom-guest-page');
    });

and the custom-guest-page.blade.php is:

<x-filament::page>
    <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
        <div class="max-w-md px-8 py-6 mt-4 bg-white shadow-lg rounded-lg">
            <h2 class="text-2xl font-bold text-center text-gray-700">Welcome to Filament</h2>
            <p class="mt-4 text-gray-600">
                This page is rendered using the Filament guest layout.
            </p>
        </div>
    </div>
</x-filament::page>

When I navigate to /page I get Using $this when not in object context does anyone knows what I can do?

5 Replies

gladjanus43•3w ago

Hi, I have a working Full Page livewire component. This works with the styles from Filament https://github.com/filamentphp/filament/discussions/7819 I followed what myregistration posted! Hope it helps

GitHub

Full Livewire component with Fillament Layout? · filamentphp filame...

HI, i have created a Livewire component under its own route: Route::get(..., Componente::class). But how can i use it with the Filament Layout? I have created under views/components/layouts/app.bla...

gladjanus43•3w ago

Now I have a route which is public accessible

terumiOP•3w ago

Sorry, I couldn't understand from what you gave me...

gladjanus43•3w ago

You can create a livewire component, and return that component from a route to get a full page component:

Route::get(
    '/transport',
    CreateTransportOrderForm::class
)
    ->middleware('web')
    ->name('transport-order.create');

Route::get(
    '/transport',
    CreateTransportOrderForm::class
)
    ->middleware('web')
    ->name('transport-order.create');

Then in that livewire component:

class CreateTransportOrderForm extends Component implements HasForms
{

    #[Layout('components.layouts.guest')]
    public function render(): View
    {
        return view('tms::livewire.create-transport-order-form');
    }

}

class CreateTransportOrderForm extends Component implements HasForms
{

    #[Layout('components.layouts.guest')]
    public function render(): View
    {
        return view('tms::livewire.create-transport-order-form');
    }

}

Then the last thing you need to do is create a public layout inside views/components/layouts called guest.blade.php

<!DOCTYPE html>
<html
    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
    class="fi min-h-screen"
>

    <head>
        <meta charset="utf-8">
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1"
        >
        <meta
            name="csrf-token"
            content="{{ csrf_token() }}"
        >

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


        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

        <!-- Styles -->
        @livewireStyles
        @filamentStyles
    </head>

    <body>
        <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
            <div class="text-gray-900 dark:text-gray-100 antialiased font-sans h-screen">
                {{ $slot }}
            </div>
        </div>

        @livewireScripts
        @filamentScripts
    </body>

</html>

<!DOCTYPE html>
<html
    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
    class="fi min-h-screen"
>

    <head>
        <meta charset="utf-8">
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1"
        >
        <meta
            name="csrf-token"
            content="{{ csrf_token() }}"
        >

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


        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

        <!-- Styles -->
        @livewireStyles
        @filamentStyles
    </head>

    <body>
        <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
            <div class="text-gray-900 dark:text-gray-100 antialiased font-sans h-screen">
                {{ $slot }}
            </div>
        </div>

        @livewireScripts
        @filamentScripts
    </body>

</html>

Povilas K•3w ago

Maybe my older video would help: https://www.youtube.com/watch?v=QZBXG8OSz7U

Filament Daily

YouTube

Use Filament Forms in Public Livewire Component

I want to demonstrate how to use Filament forms on a public website page for non-logged-in users. Source on Filament Examples: https://filamentexamples.com/project/appointment-reservation-public-form

Gaming

Programming

Guest pages using the filament layout.