Pug call js function from another file inside template

Question

I can't solve this for almost four hours, and i can't find any helpful documentation for this kind of problems. This is the issue, I'm using pug/jade templates and i want to call function inside pug template to transform some data This is the main template:

 /** main template */
section
  each pet in pets
    .pet
      .photo-column
        img(src= pet.photo)
      .info-column  
        h2= pet.name 
        span.species= (pet.species)
        p Age: #{calculateAge(pet.birthYear)} //here I need to call calculateAge function
        if pet.favFoods
          h4.headline-bar Favorite Foods
          ul.favorite-foods
            each favFood in pet.favFoods
              li!= favFood
/** end main template **/

This is the external function:

/** calculateAge.js **/

 module.exports = function(birthYear) {
   var age = new Date().getFullYear() - birthYear;

   if (age > 0) {
     return age + " years old";
   } else {
     return "Less than a year old";
   }
 };
/** end calculateAge.js **/

What shell I do to make this happen?

score 11 · Answer 1 · answered May 08 '17 at 05:41

There may be better way to handle this, but I usually do it by importing the external module and then passing it as part of template context object. That means the code that renders the template should be something like:

const calculateAge = require("calculateAge"); // change path accordingly

router.get("/main", function(){
  let pageInfo = {};
  pageInfo.title = "Demo";
  pageInfo.calculateAge = calculateAge;
  res.render("main", pageInfo);
});

Now, you can access calculateAge in your template. If this module is used a lot in most of the templates, then you should pass it as part of res.locals or app.locals so that it is available for all templates without the need to append it for every path request.

score 4 · Answer 2 · answered Mar 22 '19 at 14:46

4

In PUG options use locals property to import functions you want to use inside your templates.

const calculateAge = require('./calculate-age');

const config = {
  pug: {
    locals: {
      calculateAge,
    },
  },
};

Then you can use it in all your templates like this (please note the extra unescaping tag !{}):

p Age: !{calculateAge(pet.birthYear)}

answered Mar 22 '19 at 14:46

mahish

975
7
15

1

I use Expressjs. Where exactly should I put the configuration code? – user8555937 Mar 14 '20 at 16:39
@user8555937 Does this help you? `app.locals.foo = 'foo';` https://pugjs.org/api/express.html – mahish Mar 14 '20 at 22:27
2

Where do you put the configuration code? – Khushboo Gandhi Dec 07 '21 at 02:41
Downvoting as this doesn't explain where to pass the `config` object – Dominic May 31 '23 at 08:44
What the heck is "PUG options" ? – Craig Wilcox Jun 26 '23 at 14:39
It depends how you use PUG. In my case, I used PUG via Gulp. If you use Express then `locals` does not refer to PUG options but Express options. See http://expressjs.com/en/4x/api.html#app.locals However, the PUG itself have options as well https://pugjs.org/api/reference.html#options It really depends in what stack you use it. – mahish Jun 27 '23 at 08:23

score 2 · Answer 3 · answered Jan 10 '23 at 19:17

Make your function available in pug like this:

//assuming you're using express
app.set('view engine', 'pug');
app.locals.someFunction = input => input * 5;
// or
import {someOtherFunction} from "packageOrFile";
app.locals.someOtherFunction = someOtherFunction;

In your pug you then can do

span= someFunction(10)
span= someOtherFunction(123)

This is basically what mahish wrote in his comment, but it actually answers the question satisfactory and here's the documentation.

score 0 · Answer 4 · answered May 08 '17 at 01:39

0

Like in raw HTML if you want JS to execute in a sepcific part you need a script tag to enclose the js you want to use.

 span.species= (pet.species)
 p Age:
     .script 
         calculateAge(pet.birthYear) 
 if pet.favFoods

answered May 08 '17 at 01:39

Paddy

772
2
11
28

score -2 · Answer 5 · answered May 19 '17 at 08:08

-2

You can write javascript with .script tag

 script.
   $( document ).ready(function() {
   calculateAge(params)
 })

answered May 19 '17 at 08:08

jamesthakid

1,265
10
11

Pug call js function from another file inside template

5 Answers5

Linked