AdonisJS v6 is here. Learn more in our release blog post.


As the name suggests, partials are a way to extract a chunk of markup to its file and then re-use it across multiple templates.

Keeping the website header, logo, footer, and sidebar in its file are some common use cases for partials.

Basic example

Let's create a standard webpage with a header, sidebar, main, and footer using partials.

1. Create the following file structure

├── views
├── partials
├── footer.edge
├── header.edge
└── sidebar.edge
└── home.edge

2. Write the following content inside the respective partials

<header class="header"></header>
<div class="sidebar"></div>
<footer class="footer"></footer>

3. Write the following markup inside the home.edge file.

<!DOCTYPE html>
<meta charset="utf-8">
* { margin: 0; padding: 0; }
.header { height: 60px; background: rgba(255,138,0,.2); }
.layout { height: calc(100vh - 100px); display: flex; }
.sidebar { height: 100%; background: rgba(156, 39, 176, 0.2); width: 250px; }
main { height: 100%; background: #f7f7f7; flex: 1 }
.footer { height: 40px; background: #5e5e5e; }
<section class="layout">

4. Result

The @include tag

The @include tag is responsible for loading and inlining the partials.

  • It accepts only a single argument, that is, the partial path relative from the views directory
  • The path can also be dynamic. Meaning you can use variables to define the partial path
  • The partial have access to the parent template state

Also, there is an additional @includeIf tag to include the partial, only when a certain condition is true.

@includeIf(post.comments, 'partials/comments')