Vapor Leaf embed reusable component

Related Projects Vapor
1

Hi all I am new to Leaf (and HTML templating in general). I am running into an issue with reusable components. I have a div that I want to reuse in many different .leaf files. Right now the only way I see to do something like this would be to extend the .leaf files like so:

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

<html>
    <head>
        <title>#(title)</title>
    </head>
    <body>#import("body")</body>
</html>

The problem here is that you must render the child instead of the parent. How can I flip this so that I render the parent instead? For example: I want to render my 'Home' page (home.leaf). On this page there would be an 'Info Button'. This button would be in many places and in many components, with the same functionality. How can I embed 'infoButton.leaf' into 'home.leaf'?

Note: This is for a HTMX project

2

It's counterintuitive, but the way is actually #extend. The #extend tag embeds the component right where you define it, and you can export to it kind of like arguments or parameters to the component.

<html>
    <head>
        <title>#(title)</title>
    </head>
    <body>#extend("infoButton")</body>
</html>

Now what this probably reveals is that you need to flip the way you think about things and embed them on the leaf (haha) templates of the tree, so you would really want to do something like

#extend("master"):
    #export("body"):
        <p>Welcome to Vapor!</p>
        #extend("infoButton")
    #endexport
#endextend
1 Like
3

That's exactly what I was looking for thank you. And yeah that does feel counterintuitive haha

4

This is something I want to tidy up in the next version

1 Like