Here is a real example where we consider some of the many things that we want our button to do (and not do). You can pass an object to a mixin: mixin button() Button label In a nutshell Storypug lets you import pug mixins as functions and render them to HTML. This allows frontend developers to use known a syntax and techniques, instead of learning a complete new template engine. A set of utilities to ease using pug templates in Storybook. That only took 7 years of using it… :D!įirst up – mixin composition, you can use block as an equivalent to in other template languages (Vue, Svelte) mixin button The Pug Template engine compiles a subset of JavaScript (ES2015) to Go templates. A common example of this concept is cards on social media sites. This allows you to write a sort of 'mold' of a component, then fill it out with relevant data later on. I think by now I know most there is to know about Pug. Mixins can also take a block of Pug to act as the content: mixin article ( title ). Mixins allow you to write chunks of Pug markup with or without dynamic data, then use that markup anywhere you want. Some things I learned about Pug this week. But at this point, its barely a template and I might as well just copy and paste, since I am already writing all the attributes for each row out separately even though they could be vastly simplified if I could just use string interpolation within attributes inside a pug mixin.

Pug template mixin