Using Vue.js with Nunjucks

user_2060432 0
Viewed 1917

My company has a build system for static sites using nunjucks for the html rendering. I would like to add Vue.js to do some prototyping. I don't want to use nunjucks in my Vue templates. I have an index.njk page that I would like to add Vue to. When I run the command that serves the pages everything builds just fine but I get no output from Vue.

Index.njk

{% block content %}
<main class="wrapper">
    <div class="prod-switcher">
        <prod-tabs></prod-tabs>
    </div>
</main>
{% endblock %}

I then use .prod-switcher as the el for Vue. The build system is using express for the server with webpack middleware for hot module reloading. So in the server.js file there is this bit.

files.forEach(fileName => {
            app.get(`/${fileName.replace('njk', 'html')}`, function(req, res) {
                const data = getDataFile(fileName);
                return res.render(fileName, data);
            });
        });

It's just looking for all the njk files and rendering them. Nothing actually gets outputted to the file system. When I look at the page in the browser I can see that the .prod-switcher element is gone but this is what's in it's place.

<main class="wrapper">
    <!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->
</main>

Vue-loader is being used in webpack. Does anyone if it's possible to do what I'm trying to do.

nunjucks vue.js javascript
1 Answers

Turns out webpack was resolving to a runtime version of Vue. If I add an alias property to point to vue.esm.js everything works

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
    }
}
user_20604320
Related