Component Helpers | Advanced Guides Docs

Autoload comes bundled with several View Components, including;

There are also smaller, less common components that are optional to use. These are;

Header
Footer
SEO

Header & Footer

These are useful for injecting custom Blade stacks that are used for Content Block spacing customization as well as auto-including the Autoload scripts.

You can use them in your site template like so;

     1<!DOCTYPE html>
 2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 3    <head>
 4        <x-autoload::header>
 5            @vite(['resources/css/app.css'])
 6        </x-autoload::header>
 7 
 8        <title>Page Title</title>
 9    </head>
10    <body>
11        <!-- header navigation -->
12 
13        <main role="main">
14            {{ $slot }}
15        </main>
16 
17        <!-- footer navigation -->
18 
19        <x-autoload::footer>
20            @vite(['resources/js/app.js'])
21        </x-autoload::footer>
22    </body>
23</html>

SEO

Autoload [Pages](/docs/pages) comes with SEO and Metadata-related fields that can be customized in the Filament CMS.

If you're using the Header component (above), it will inject a meta stack that we can use to inject a Page's metadata into the site page's head.

You can add this component in two ways; by passing the current Request or by passing the Autoload Page variable directly, usually where you'd place your Page Builder component logic.

    1<x-autoload::seo :request="request()" />

    1<div>
2    <x-autoload::seo :page="$page" />
3 
4    @if ($page->content)
5        @foreach ($page->content as $content)
6            <x-autoload::page-builder :content="$content" :loop="$loop->index" :page="$page"/>
7        @endforeach
8    @endif
9</div>