Advanced pug tips

Block/template extension

The extends feature in Pug is very powerful, but in large projects, you might want to limit how many levels of extension you put inside your templates. Do realize that this slows down the compiler and if you want to maintain a speedy project, you might want to avoid too much nesting.

Referencing components directly in your pages to have a single source of truth

It might be smart to sometimes directly reference the code from your components, instead of duplicating the code in your templates. This is a nice way to keep your code dry.

You can directly include components using code like this:

include /_components/my-component/component-name

You could even work with mixin options to include parameters. A convoluted example can be found in this gist. But ask yourself, shouldn’t you be writing the component in something like React.js or Vue at this point?

About mixins

Mixins are a nice language feature of pug, and they can be very handy.

However, within the context of Bedrock, ask yourself if it’s not better to use structured data instead of hiding data inside of pug parameters and mixins.