title: Using Vue.js with Nunjucks
body: <p>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.</p>
  
  <p>Index.njk</p>
  
  <pre><code>{% block content %}
  &lt;main class="wrapper"&gt;
      &lt;div class="prod-switcher"&gt;
          &lt;prod-tabs&gt;&lt;/prod-tabs&gt;
      &lt;/div&gt;
  &lt;/main&gt;
  {% endblock %}
  </code></pre>
  
  <p>I then use <code>.prod-switcher</code> as the <code>el</code> 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.</p>
  
  <pre><code>files.forEach(fileName =&gt; {
              app.get(`/${fileName.replace('njk', 'html')}`, function(req, res) {
                  const data = getDataFile(fileName);
                  return res.render(fileName, data);
              });
          });
  </code></pre>
  
  <p>It's just looking for all the <code>njk</code> 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 <code>.prod-switcher</code> element is gone but this is what's in it's place.</p>
  
  <pre><code>&lt;main class="wrapper"&gt;
      &lt;!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }--&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>Vue-loader is being used in webpack. Does anyone if it's possible to do what I'm trying to do.</p>