Can't get Nunjucks loader working in Vue JS

[davestewart]

Hey,

I tried and failed a while ago to get Nunjucks working in Vue via this package:

https://forum.vuejs.org/t/getting-nunjucks-templates-loading-with-vue-vue-loader/27944

Just posting here as I'd love to pick this up again. My apologies I'm unable to provide much info, I guess I'm really just hoping to get a bit of a walkthrough.

Thanks, Dave

EDIT: Related issue: https://forum.vuejs.org/t/reusable-templates-possible-or-feature/21494/42

[olsonpm]

I know everyone treats repos differently, but generally those questions are better fit for stack overflow after you've figured out a specific problem you're having.

[davestewart]

@olsonpm - well you may have a point, but I have a bunch of OS repositories which I'm quite happy taking usage questions on.

The way I see it, if I answer a question once, it's easy to search and refer people to again.

If it's a really good question, I can use it in the documention.

[likemusic]

@davestewart Do you have a success in using Nunjucks with Vue?

[likemusic]

Currently I have trying to use it. For temaplte like this:

<template lang="njk">
    <div>Nunjucks!</div>
</template>

Vue template loader got string like this, instead of compiled template:

var nunjucks = require("nunjucks/browser/nunjucks-slim");
var env;
if (!nunjucks.currentEnv){
	env = nunjucks.currentEnv = new nunjucks.Environment([], {"dev":false,"autoescape":true,"throwOnUndefined":false,"trimBlocks":false,"lstripBlocks":false});
} else {
	env = nunjucks.currentEnv;
}
var dependencies = nunjucks.webpackDependencies || (nunjucks.webpackDependencies = {});




var shim = require("/var/www/node_modules/nunjucks-loader/runtime-shim");


(function() {(nunjucks.nunjucksPrecompiled = nunjucks.nunjucksPrecompiled || {})["resources/js/Domain/Invoices/Outgoing/Waybill/TestNunjucks.vue"] = (function() {
function root(env, context, frame, runtime, cb) {
var lineno = 0;
var colno = 0;
var output = "";
try {
var parentTemplate = null;
output += "\n<div>Nunjucks!</div>\n";
if(parentTemplate) {
parentTemplate.rootRenderFunc(env, context, frame, runtime, cb);
} else {
cb(null, output);
}
;
} catch (e) {
  cb(runtime.handleError(e, lineno, colno));
}
}
return {
root: root
};

})();
})();



module.exports = shim(nunjucks, env, nunjucks.nunjucksPrecompiled["resources/js/Domain/Invoices/Outgoing/Waybill/TestNunjucks.vue"] , dependencies)"

[likemusic]

From #24 I found nunjucks-html-loader. Seems it works well with vue-loader.

[davestewart]

Hey @likemusic - I haven't needed to since, so ended up ceasing investigations.

Good news about the loader though.

Is that related to your other project?

[likemusic]

@davestewart If you means vue-template-extends, then it not uses nunjucks-html-loader at all (just vue for parsing components and compile templates and jsdom to manipulate with templates html-code).

And I ended up ceasing investigations with nunjucks-html-loader too, after get success with compile simple template from my 3rd comment, because I had an Epiphany with my loader. So because I trying to use nunjucks just for extend templates, I currently use my loader, because its more lightweight and clear solution, then using 3-rd party template processor.