How do you extend templates in Leaf using the #extend and #export tags in leaf?

Question

How do you extend templates in Leaf using the #extend and #export tags in leaf?

214 Views Asked by Ethan Mofokeng At 04 April 2025 at 10:12

The Leaf documentation doesn't seem to be working for me I can't figure out why.

child.leaf

#extend("index"):
    #export("hello"):
        <p>Welcome to Vapor!</p>
    #endexport
#endextend

index.leaf

<!-- Backend Projects -->
<div class="seciton-label">
    <h3>#(.backendCollection.title)</h3>
</div>
  
#import("hello")
 
<!-- Backend Card -->
#for(card in .backendCollection.collection):
<div class="greeting-card">
    <a href=#(card.url)>
        <h3>#(card.title)</h3>
    </a>
    <p> #(card.description) </p>
</div>
#endfor

The following image is the result I get in localhost

Request result running the vapor server on localhost

Please help - I can't find solutions to this issue. No response from forums.swift.org

Tried removing the import key
Removing quotes
I saw individuals using the following format in older versions of Vapor. This did not work for me either.

<!-- I tried the following format for the extend and export blocks -->

#extend("index") {
    #export("hello") {
        <p>Welcome to Vapor!</p>
    }
}

I'm trying to be able to extend the leaf templates and understand why the html does not render.

Original Q&A

There are 1 best solutions below

**Nick** · Answer 1

This works and does something similar to what you want.

This is my 'template' (heavily simplified here), called Base.leaf:

<!DOCTYPE html>
<html>
   <head>
      <title>#(title)</title>
   </head>
   <body>
        #import("body")
   </body>
</html>
#extend("Build/Message")
</body>
</html>

The extend of Build/Message above behaves simply like an include.

Then I use it in a form called Login.leaf here:

#extend("Build/Base"):
#export("body"):
<form method="POST" action="/log-in">
    <label for="email">Email</label>
    <input type="text" name="email" required>
    <label for="password">Password</label>
    <input type="password" name="password" required>
    <button class="btn-success">Log-in</button>
</form>
#endexport
#endextend

I then use the `Login.leaf' in a render such as:

let context = ["title": "Log in", "version": C.Msg.Version, "message": request.getMessage()]
return try await request.view.render("Form/Login", context)

How do you extend templates in Leaf using the #extend and #export tags in leaf?

There are 1 best solutions below

Related Questions in SWIFT

Related Questions in VAPOR

Related Questions in SERVER-SIDE-SWIFT

Related Questions in LEAF

Trending Questions

Popular # Hahtags

Popular Questions