Filament•9mo ago

Filament + app layout

How does Filament decide which layout to use? I've followed the setup instructions and and have a resources/views/components/layouts/app.blade.php file, but I'm pretty sure it's not using it 🤔 Here is my layout (it's mostly vanilla with some changes)

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <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" />
        <link rel="icon" href="{{ asset('favicon.png') }}" type="image/png" />

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

        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>
        @vite('resources/css/app.css')
        @stack('styles')
        @livewireStyles
        @filamentStyles
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100">
            <livewire:navigation/>

            <!-- Page Content -->
            <main>
                {{ $slot }}

                @livewireScriptConfig
                @filamentScripts
                @livewire('notifications')
                @vite('resources/js/app.js')
                @stack('scripts')
            </main>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <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" />
        <link rel="icon" href="{{ asset('favicon.png') }}" type="image/png" />

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

        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>
        @vite('resources/css/app.css')
        @stack('styles')
        @livewireStyles
        @filamentStyles
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100">
            <livewire:navigation/>

            <!-- Page Content -->
            <main>
                {{ $slot }}

                @livewireScriptConfig
                @filamentScripts
                @livewire('notifications')
                @vite('resources/js/app.js')
                @stack('scripts')
            </main>
        </div>
    </body>
</html>

2 Replies

toeknee•9mo ago

Filament doesn't use an app layout, it uses it's own layout. If you want to build a liveware based stack which then has filament forms/tables/notifications integrated with you do it similar to the above

ChesterS•9mo ago

Ok my problem is I don't have live reload on the filament pages (this is how I noticed the layout issue). So is there a way to get this to work with vite? Or any way to modify/publish the Filament layout? I have app/Filament/** in my vite.config but, from what I can see, i'm missing the required js code to enable live-reload (or w/e it's called)

Gaming

Programming

Filament + app layout