Layouts with Components

The starter kits make the layout a component. <x-layouts.shop> is components/layouts/shop.blade.php, which declares @props(['title' => 'Bookshop']), prints the page with {{ $slot }} and has @stack('styles') in its <head>:

resources/views/products/index.blade.php, without its @prepend and @fragment linesXML

<x-layouts.shop title="New arrivals">
  <x-alert type="warning">
    <x-slot:title>Shipping delay</x-slot>
    Orders placed after 2 p.m. ship on Monday.
  </x-alert>
  <div class="cards">
    @foreach ($products as $product)
      <x-product-card :product="$product" :featured="$loop->first" :data-id="$product->id" />
    @endforeach
  </div>
</x-layouts.shop>

This is the HTML that GET /products returned, styled by Pico CSS 2 from jsDelivr 15,886 :

HTML returned by GET /productsHTMLLive

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New arrivals | Bookshop</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
      <style>.cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }</style>
   <style>.featured { outline: 3px solid #ef6c00; }</style> </head>
<body>
  <main class="container">
    <h1>New arrivals</h1>
    <aside role="alert"
  style="padding: .75rem 1rem; background: #fff3e0;">
  <strong >Shipping delay:</strong> Orders placed after 2 p.m. ship on Monday.
</aside>
    <div class="cards">
          <article class="featured" data-id="1">
  <strong>The Pragmatic Programmer</strong><br><small>David Thomas, Andrew Hunt</small>
  <p><strong >$49.95</strong>  </p>
</article>
          <article class="" data-id="2">
  <strong>Designing Data-Intensive Applications</strong><br><small>Martin Kleppmann</small>
  <p><strong >$54.99</strong>   <small>Only 3 left</small> </p>
</article>
          <article class="" data-id="3">
  <strong>Clean Code</strong><br><small>Robert C. Martin</small>
  <p><strong >$39.99</strong>   <mark>Sold out</mark>
  </p>
</article>
      </div>
  </main>
  </body>
</html>

Browser output of 58

The slot renders before the layout, so the @prepend('styles') adding the grid rule must sit inside the component tag; below </x-layouts.shop> it printed nothing. A real layout also calls @vite(['resources/css/app.css', 'resources/js/app.js']), which printed tags with hashed names from public/build/manifest.json after npm 2,036 run build, and threw "Vite 25,978 manifest not found" before it (@vite and Manifest).

MENU

Layouts with Components