In my organization, we have a build system in place for static websites that utilizes nunjucks for HTML rendering. I am interested in implementing Vue.js for prototyping purposes but do not want to mix it with nunjucks in my templates. Specifically, I am looking to integrate Vue.js into an index.njk page. Although the command to serve the pages is successful and builds without errors, I am encountering a problem where there is no output from Vue.
Within the Index.njk file, the structure looks like this:
{% block content %}
<main class="wrapper">
<div class="prod-switcher">
<prod-tabs></prod-tabs>
</div>
</main>
{% endblock %}
I have designated .prod-switcher as the el for Vue. Our build system relies on Express for the server and uses webpack middleware for hot module reloading. The following snippet can be found in the server.js file:
files.forEach(fileName => {
app.get(`/${fileName.replace('njk', 'html')}`, function(req, res) {
const data = getDataFile(fileName);
return res.render(fileName, data);
});
});
This code snippet's purpose is to locate all the njk files and render them, but nothing is actually being written to the file system. Upon inspecting the page in the browser, the .prod-switcher element seems to have disappeared, only to reveal the following unexpected content:
<main class="wrapper">
<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->
</main>
We are utilizing Vue-loader within webpack. If anyone has insights or suggestions on whether achieving my intended setup is feasible, your input would be greatly appreciated.