Building a Page

This guide walks you through creating a complete CMS page from scratch.

Step 1: Create the Page Component

Create a Livewire component that extends JFA\FilamentCMSLivewire\Livewire\Page:

namespace App\Livewire\Pages;

use JFA\FilamentCMSLivewire\Livewire\Page;

class About extends Page
{
    public function __construct()
    {
        parent::__construct(
            componentView: 'livewire.pages.about',
            slug: 'about',
            layout: 'layouts.app',
        );
    }
}

Required Constructor Arguments

Argument	Purpose
`componentView`	Blade view path for this page
`slug`	Must match the database page slug
`layout`	Laravel layout view to use

Step 2: Create the Blade View

{{-- resources/views/livewire/pages/about.blade.php --}}
<div class="wrapper py-20">
    @include('filament-cms-livewire::partials.page')
</div>

The filament-cms-livewire::partials.page partial renders all sections dynamically. You can customize this or render sections manually.

Custom Rendering (Optional)

If you need more control over layout:

{{-- resources/views/livewire/pages/about.blade.php --}}
<div>
    {{-- Custom header --}}
    <header class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4">
            <h1>About Us</h1>
        </div>
    </header>

    {{-- CMS sections --}}
    <div class="wrapper py-20">
        @include('filament-cms-livewire::partials.page')
    </div>

    {{-- Custom footer --}}
    <footer class="bg-gray-100 py-8">
        <div class="container mx-auto px-4">
            <p>Contact us for more information.</p>
        </div>
    </footer>
</div>

Step 3: Add the Route

use App\Livewire\Pages\About;

Route::get('/about', About::class)->name('about');

Step 4: Create the Page in Admin

Go to /admin → CMS → Pages
Click Create
Fill in:
- Title: “About Us”
- Slug: about (must match your component’s slug())
- Route: about (should match your route name)
- Status: Published

Step 5: Create Sections

Create sections that will appear on this page:

Go to CMS → Sections
Create sections with slugs that match your Livewire components:
- hero → renders App\Livewire\Hero
- mission → renders App\Livewire\Mission
- team → renders App\Livewire\Team

Step 6: Attach Sections to Page

Edit the “About Us” page
Go to the Sections tab
Click Attach Section
Select your sections and set the order:
- Hero: order 1
- Mission: order 2
- Team: order 3

Step 7: Visit the Page

Open http://your-app.test/about — your sections should render in order.

How Page Rendering Works

sequenceDiagram
    participant Browser
    participant Route
    participant Page
    participant DB
    participant Section
    
    Browser->>Route: GET /about
    Route->>Page: Mount About component
    Page->>DB: Find page by slug 'about'
    DB->>Page: Return page with sections
    Page->>Page: Resolve each section
    loop For each section
        Page->>Section: Instantiate Livewire component
        Section->>Section: mount(SectionContent)
        Section->>Section: hydrateFromContent()
    end
    Page->>Browser: Render HTML

Adding Metatags

The Page class automatically injects metatags from the CMS page record. Ensure your layout includes:

{{-- resources/views/layouts/app.blade.php --}}
<head>
    <title>@yield('title', config('app.name'))</title>
    @include('filament-cms-livewire::partials.head')
</head>

The filament-cms-livewire::partials.head partial renders:

<title> from page metatags
<meta name="description">
Open Graph tags
Twitter Card tags

Full Example

namespace App\Livewire\Pages;

use JFA\FilamentCMSLivewire\Livewire\Page;

class Services extends Page
{
    public function __construct()
    {
        parent::__construct(
            componentView: 'livewire.pages.services',
            slug: 'services',
            layout: 'layouts.app',
        );
    }
}

{{-- resources/views/livewire/pages/services.blade.php --}}
<div>
    @include('filament-cms-livewire::partials.page')
</div>

use App\Livewire\Pages\Services;

Route::get('/services', Services::class)->name('services');

Common Patterns

Page with Custom CSS Class

public function __construct()
{
    parent::__construct(
        componentView: 'livewire.pages.about',
        slug: 'about',
        layout: 'layouts.app',
    );
}

<div class="about-page">
    @include('filament-cms-livewire::partials.page')
</div>

Conditional Layout

public function __construct()
{
    parent::__construct(
        componentView: 'livewire.pages.about',
        slug: 'about',
        layout: auth()->check() ? 'layouts.app' : 'layouts.guest',
    );
}

Troubleshooting

Problem	Cause	Solution
Blank page	No sections attached	Attach sections in admin
”Page not found”	Wrong slug	Match slug in DB and component
Sections in wrong order	Order column	Reorder in admin
Component not found	Missing class	Check `sections_class_path` config