Mixin vs. Include in Pug?

Question

Pug

What is the best approach for reusing different markup structures in Pug.js, for example when using a component approach in layout? Let's say we have a button that could be:

button.btn.btn--default Submit
button.btn.btn--disable Send
...

It's better to use a mixin, something like:

mixin btn(type)
  button.btn(class=`btn--${type}`) Text

and stick it in the right places:

+btn('default')
+btn('disable')

Or is it better to create files with the desired markup and paste with include?

btn-default.pug
btn-disable.pug

It is clear that the matter is not limited to buttons alone and it is supposed to reuse more complex markup

Answer 1

Parameters are explicitly passed to the mixin, and this is a great happiness. If you try to emulate mixins with includes, you will quickly run into code like this:

- var buttonTitle = "кнопка";
- var buttonSmall = "small";
- var buttonType = "danger";
- var icon = "trash";
include 'includes/button'

Imagine two or three of these buttons side by side. Do you still want to do it with includes? And if you need to transfer custom layout to the button? With inclusions, this is not possible at all.
Inclusions can only connect these same mixins, IMHO.