Components and reuse

Propel reuses markup in two ways today: layouts, and sections. Components and @include are planned, but they are not built yet, so they are described at the end of this page.

Layouts

A layout holds the parts every page shares. It marks the place for each section with @yield.

{{-- resources/views/layouts/app.propel --}}
<main>
  @yield('content')
</main

A page fills the layout by naming the layout with @extends and writing its sections:

@extends('layouts.app')

@section('content')
  <h1>Posts</h1>
@endsection

One layout serves every page. The sidebar, the header and the asset tags are written once, in the layout.

Sections

A section is a named piece of a page. Each section appears where the layout yields it. A section must be at the top level of the view, not inside an @if or a loop.

Planned: components and includes

The next features for reuse are a component tag, such as <x-card>, that takes attributes and a slot, and @include, which renders another view in place. Neither exists yet, so the example below is only a sketch of the intended syntax:

<x-card title="Hello">
  <p>Card body.</p>
</x-card>

@include('partials.footer')

Until they exist, share markup through a layout, or through the shared data described on the context page.