how can i include some jade from node_modules?

[i5ting]

example

header.jade in node_modules/xxx/views/header.jade

in my express layout

include node_modules/xxx/views/header.jade

[TimothyGu]

There is no special syntax for files from a npm module. What you have now is correct.

We could consider making a require plugin for such things after jade@2 is released though.

[tjconcept]

Would be absolutely amazing if you could easily compose stuff using npm.

I think it should follow the same rules as Node.js for resolving. Maybe something like https://www.npmjs.com/package/resolve (developed for Browserify) could be used. Not sure if it will need some patching for index.js -> index.jade.

Update: seems like the opts.extensions option can be set to an array ([ '.jade' ]).

[tomlagier]

I've written a Gulp plugin that does exactly this! Check it out, maybe it will help: https://github.com/tomlagier/gulp-jade-modules

[jonscottclark]

Nice, @tomlagier, looks like that could be helpful.

Having recently been checking out how to accomplish this with Sass, the way npm-sass does it is that it defines use a custom "importer" function, which you pass to the "importer" option at compile-time, which extends the default Sass import behaviour to use the closest node_modules dir as the first location to check when resolving filenames. Maybe a similar approach could be taken; you could define your own custom "includer" function (in Jade's case) to accomplish this with Jade?

Of course, it wouldn't be obvious to people looking at your code later on that it's not just looking for your includes relative to the current file, which could throw people off. I definitely like the idea of a require keyword in jade@2, which I guess would just be an extension of include, @TimothyGu :)

[iliakan]

is it possible to somehow override jade resolve mechanism?

Like you know, webpack uses ~module/path/to.js to search in modules. I'd love to do the same. In a modular architecture it's pretty common for one module to use something from another.

[glebmachine]

Yeah, it would be awesome to have some props, to define import paths.

Or, maybe, support node_modules like:

include 'bemto/bemto.jade'

(repo from example: https://github.com/kizu/bemto)

P.S Worst thing - each time you should write crazy paths like ./../../../node_modules/bemto/bemto.jade

[jamespegg]

I've come across a pretty specific use case where this would be very handy;

In Express 4.1+ you can set multiple view directories. At the moment all that means is that Express first checks the location of the root .pug file in one of the defined directories. Once it's found one, it'll just pass that path down to Pug and all the includes and extends in Pug are in relation to that particular file.

The situation I've got is that I want users to be able to overwrite portions of a base template, which means mixing includes and extends across a bunch of locations. For example they might want to keep the the nuts and bolts of a particular view, but overwrite the overarching theme template.

There's a couple of ways you could approach this. Firstly, you could build multiple directory resolves directly into Pug (as already suggested). Secondly, you could use the directories defined in Express. It'll need a change in Express to pass that array through (it's a couple of lines to make that happen) and then a bunch of work in Pug to use it. The second option should work in tandem with sort of "options" setting as well.

I'll raise a ticket on the Express repo to see if they'll even consider passing the array of view directories through to view engines.

[ForbesLindesay]

I think the basedir option already covers that use case pretty well.

[jamespegg]

Ah thanks, I've just been playing around with basedir and finally cracked it. In express I've got multiple view directories to load the template but then I've set the "default" directory as pug's basedir.

I couldn't seem to find any mention of basedir in the documentation though?