Twig Push/Stack Extension

When working with Twig, you might find yourself needing to push content in one file (like a component or partial) into a place in another file.

While you can achieve a similar effect with Twig’s built-in {% block %} directive, Laravel’s Blade’s @push and @stack directives is far more versatile and functional, with no reliance on the template-extending syntax or order of the placements.

To bring this functionality to Twig, a colleague of mine, Chris Powell created the Twig Stack Extension package that works in pretty much the same way as Blade’s implementation.

For example, pushing into a named stack:

<!-- components/datepicker.twig -->
<input type="text" class="datepicker" />

{% pushonce 'scripts' %}
    <script src="/path/to/datepicker-lib.js" />
{% endpushonce %}

And rendering a named stack:

<!-- layout.twig -->
<html>
    <head>...</head>
    <body>
        ...
        {% stack 'scripts' %}
    </body>
</html>

You can get the package below.

GitHub - futureplc/twig-stack-extension

Contribute to futureplc/twig-stack-extension development by creating an account on GitHub.

github.com

Or see Chris’ post about why we created it and didn’t use an existing solution here:

Twig Push/Stack Extension

Fixing up a package to introduce a Laravel inspired Push/Stack directive extension into Twig.

ampedweb.dev

Hi, I'm Liam

Twig Push/Stack Extension