How to Use Nunjucks Macros for Component Functionality in Eleventy

Using Nunjucks Macros for Component-Like Functionality in Eleventy

Eleventy is a fantastic static site generator, and when paired with Nunjucks macros, it can provide component-like functionality similar to more complex frameworks. Let's explore how to use Nunjucks macros to create reusable components in Eleventy.

Creating a Product Card Macro

Here's an example of a product card macro:

{% macro productCard(product) %}
<a href="{{ product.url }}" target="_blank">

  <div class="card card-default card-hover">

    <div class="card-top relative">
      <img class="width-1-1" src="{{ product.data.imagePath }}" alt="Avatar for {{ product.data.Title }}" loading="lazy">
    </div>

  <h3>{{ product.data.Title }}</h3>
  <span>$ {{ product.data.price }}</span><br>
  <p>{{ product.data.description | safe }}</p>

  </div>

</a>
{% endmacro %}

This macro creates a product card with an image, title, price, and description which are all dynamic and will be filled with the corresponding fields in your product frontmatter.

Importing and Using the Macro

To use this macro in your Eleventy templates, you first need to import it:

{% from 'components/cards/productCard.njk' import productCard %}

Notice that the name after 'import' (productCard) matches the macro name in the component file. This is important for the macro to work correctly.

Once imported, you can use the macro like this:

{%- for product in collections.products -%}
 {{ productCard( product = product ) }}
{%- endfor -%}

This code loops through all products and creates a card for each one.

Customizing Macros

You can pass as many options as you like to a macro, as long as they're set up in the macro definition. This makes macros very flexible and reusable, similar to components in more complex frameworks.

For example, let's modify our product card macro to accept a 'dark' option:

<!-- Card is automatically light unless specified  -->
{% macro productCard(product, dark = false) %}
<a href="{{ product.url }}" target="_blank">

<div class="{% if dark == true %}card-dark{% endif %} card card-default card-hover">
  <!-- Rest of the card content -->
</div>

</a>
{% endmacro %}

Now you can use this macro to create both light and dark product cards:

<!-- Light version -->
{{ productCard(product = product) }}

<!-- Dark version -->
{{ productCard(product = product, dark = true) }}

This flexibility allows you to easily create variations of your components without duplicating code, making your templates more maintainable and adaptable to different design needs.

Nesting Macros

Macros can also be nested within each other. For example, if you need a product grid to hold your product cards, you could create a grid macro and use the product card macro inside it.

Here's how you might create a product grid macro:

<!-- Don't forget to import it from its file path -->
{% from 'components/cards/productCard.njk' import productCard %} 

{% macro productGrid(products) %}<div class="product-grid">
  {%- for product in products -%}
    {{ productCard(product = product) }}
  {%- endfor -%}
</div>
{% endmacro %}

Then you could use this grid macro in your templates:

{% from 'components/grids/productGrid.njk' import productGrid %}

{{ productGrid(products = collections.products) }}

Conclusion

Using Nunjucks macros in Eleventy provides a simple yet powerful way to create reusable components. This approach can make Eleventy competitive with more complex frameworks like Astro for building static sites. By leveraging macros, you can create modular, maintainable templates that are easy to update and reuse across your site. Additional information available in the macros section in the Nunjucks docs.