2

To make random strings in pug template I want to use random-string javascript module.

First I install it via npm like this :

npm install random-string

Then in pug template I used this :

.site
   .title
       - var string = randomString({length: 20});
       | #{string}

But while compiling files I got this error :

randomString is not a function

How Can I use third party javascript functions in pug js temaplte?

1
  • Yes you can, but you need to pass it as pug render parameter, because you cannot require in pug. Just require in the outer context and pass it. Commented Jul 18, 2017 at 7:49

2 Answers 2

4

Your pug file won't have scope of randomString unless it is passed in when you call render() in your file that is calling it (such as your controller).

e.g.

this.render("[pugFilename]", {
    randomString = require("randomstring") // whatever package name you're using
}

Personally, I prefer doing any non-view stuff outside the view and in the script that is requesting the view to be rendered, where I can.

The syntax in Pug can start to look very messy otherwise and become difficult to follow.

You can switch out the code above with the code in your question and it should work fine, although I'd recommend changing your variable name (or key) to something more meaningful.

e.g

this.render("[pugFilename]", {
    randomStr: randomString({ length: 20 })
});
Sign up to request clarification or add additional context in comments.

Comments

0

Update for phpStorm File Watcher

Firstly, install pug-cli and random-string locally,

npm install pug-cli random-string --save

Then setup File Watcher,

enter image description here

Original answer

Set and require random-string as a local variable, then you can access it in the templates. For example,

template.pug

.site
   .title
       - var string = randomString({length: 20});
       | #{string}

compile it using pug

const pug = require('pug');

// Compile template.pug, and render a set of data
console.log(pug.renderFile('template.pug', {
  randomString: require('random-string')
}));
//-> <div class="site"><div class="title">o0rGsvgEEOHrxj7niivt</div></div>

If you are using pug-cli, install random-string in the same scope of pug-cli, and specify options through a string or a file.

pug -O "{randomString: require('random-string')}" template.pug

4 Comments

I'm using phpStorm watcher to compile all .pug file in whole the project. where can I configure your instruction ?
@A.B.Developer Are you using pug-cli along with phpStorm file watcher? You can pass -O '{randomString: require("random-string")}' to arguments in watcher settings
I added -O '{randomString: require("random-string")}' to arguments but now I got this error on compiling : undefined:1 ('{randomString:) ^^^^^^^^^^^^^^^^ SyntaxError: Invalid or unexpected token
@A.B.Developer I updated my answer, succeed with -O "{randomString: require('random-string')}", and pug-cli and random-string must be installed in the same scope

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.