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.

Feb 04

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.


Burlington, KY

Layout Component

<!DOCTYPE html>
  <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() }}}

  <div class="max-w-7xl mx-auto">

    <div class="px-4">
      {{{ await $slots.main() }}}
  • 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.

<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="" 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="" 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>
    <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>
  • 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' })
    <meta name="description" content="Our cool page" />

  <h1> It Works! </h1>
  • 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.

Join The Discussion! (0 Comments)

Please sign in or sign up for free to join in on the dicussion.

robot comment bubble

Be the first to Comment!