How to add JavaScript functions to a Pug template

Question

There are many issues with adding JavaScipt to Pug templates including:

PugJS throws exceptions on many JavaScript functions that are perfectly valid.
When your JavaScript functions have syntax errors they are not identified for you.
You can't set a breakpoint in a JavaScript function within a Pug template
You can't use Typescript to help with robustness

What is the preferred/recommended way to use JavaSript functions with Pug?

bikeman868 · Accepted Answer · 2020-07-16 18:24:57Z

10

I struggled with these issues for a while before realizing that there is a much better option. I recommend passing JavaScript functions to the Pug render function instead of building them into the template.

What I was doing before was this JavaScript

const render = pug.compileFile(path.join(__dirname, '../templates/sandbox.pug'));
const html = render({});

and this Pug template

- var testFunc = function(){
-     return "Test func";
-   }

div #{testFunc()} worked!

The better way of achieving the same thing is with this JavaScript

const render = pug.compileFile(path.join(__dirname, '../templates/sandbox.pug'));
const html = render({
  testFunc: function(){
    return "Test func";
  }
});

and this Pug template

div #{testFunc()} worked!

This allows you to set breakpoints, use Typescript and all the other cool stuff, and avoids all of the Pug bugs related to parsing JavaScript not very well.

edited Jul 16, 2020 at 18:24

answered Jul 16, 2020 at 17:36

bikeman868

2,68531 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vicmortelmans Over a year ago

Am I right that the original javascript code would run on the client, while the 'better way' code would run on the server? Not good if the code should manipulate the DOM.

bikeman868 Over a year ago

In my case I was running Pug on the server-side, but you could also use Pug on the client if you want to.

Collectives™ on Stack Overflow

How to add JavaScript functions to a Pug template

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related