Simple AdonisJS 6 Layout Component

With AdonisJS 6, layouts have been removed in favor of components. In this snippet, we provide a simple layout component example.

Layout Component

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title> {{ title || "Adocasts Simple Layout Example" }} </title>

  @if ($slots.meta)
    {{{ await $slots.meta() }}}
  @endif

  @vite(['resources/js/app.js'])
</head>
<body>
  <div class="max-w-7xl mx-auto">
    @include('partials/nav')

    <div class="px-4">
      {{{ await $slots.main() }}}
    </div>
  </div>
</body>
</html>
  
    
      Copied!
      
        
      
    
  
  
resources
views
components
layout
index.edge

Layouts in AdonisJS 5 used sections, we can use component slots to easily replace them. We can also use props to easily pass data into our layout component.

Navigation Bar Partial

<header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white text-sm py-4">
  <nav class="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between" aria-label="Global">
    <div class="flex items-center justify-between">
      <a class="flex-none text-xl font-semibold" href="#">Brand</a>
      <div class="sm:hidden">
        <button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-x-2 rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent" data-hs-collapse="#navbar-collapse-with-animation" aria-controls="navbar-collapse-with-animation" aria-label="Toggle navigation">
          <svg class="hs-collapse-open:hidden flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
          <svg class="hs-collapse-open:block hidden flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
        </button>
      </div>
    </div>
    <div id="navbar-collapse-with-animation" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
      <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:ps-5">
        <a class="font-medium text-blue-500" href="#" aria-current="page">Landing</a>
        <a class="font-medium text-gray-600 hover:text-gray-400" href="#">Account</a>
        <a class="font-medium text-gray-600 hover:text-gray-400" href="#">Work</a>
        <a class="font-medium text-gray-600 hover:text-gray-400" href="#">Blog</a>
      </div>
    </div>
  </nav>
</header>
  
    
      Copied!
      
        
      
    
  
  
resources
views
partials
nav.edge

Partials still exist as they were in AdonisJS 5. This particular example is from Preline's navbar options.

Using Our Layout

@layout({ title: 'Home Page' })
  @slot('meta')
    <meta name="description" content="Our cool page" />
  @endslot

  <h1> It Works! </h1>
@end
  
    
      Copied!
      
        
      
    
  
  
resources
views
pages
home.edge

With components, anything provided between the start and end tag of the component will be rendered within the main slot. We can use the @slot tag to specify a specific named slot we'd like to target.

Simple AdonisJS 6 Layout Component

Layout Component

Navigation Bar Partial

Using Our Layout

Join the Discussion 0 comments