Pug advanced mixins

Some things I learned about Pug this week. Putting them here so I don’t forget. I think by now I know most there is to know about Pug. That only took 7 years of using it… :D!

First up – mixin composition, you can use block as an equivalent to <slot> in other template languages (Vue, Svelte);

mixin button
    button
        block
+button({}) Hey

You can pass an object to a mixin:

mixin button({ skin })
    button(class=skin)
        block
+button({ skin: "secondary" }) Hey

The objects parameters can have a default value:

mixin button({ skin = "secondary" })
    button(class=skin)
        block
+button({}) Secondary
+button({ skin: "primary" }) Primary

You can pass any attributes such as disabled like this (using “and attributes”):

mixin button({ skin = "secondary" })
    button(class=skin)&attributes(attributes)
        block
+button({})(disabled) Secondary

This is equivalent to something like ...attributes in Ember.

Final code for this reduced example:

//-
    Mixin Button - Create a button
    @param {Object} parameters
    @param {string} skin - primary or secondary (default) to choose type
mixin button({ skin = "secondary" })
    button(class=skin)&attributes(attributes)
        block
+button({}) Button label
+button({ skin: "primary" }) Button label

Here is a reduced example.

Here is a real example where we consider some of the many things that we want our button to do (and not do).