[Vuejs]-Vue.js with Rollup.js renders html comment instead of Vue html

by

0👍

✅

This was a two part issue:

  1. nunjucks render was initially resolving {{ property }} and erasing it completely. To get around this I changed the variable syntax of nunjucks:
    .pipe(
      $.nunjucksRender({
        envOptions: {
          tags: {
            variableStart: '{#',
            variableEnd: '#}'
          }
        }
      })
    )
  1. import of Vue will by default load the runtime-only module because it is declared in the modules portion of vue/package.json, and according to the installation docs:

If you need to compile templates on the client (e.g. passing a string
to the template option, or mounting to an element using its in-DOM
HTML as the template), you will need the compiler and thus the full
build

Therefore my import ended up looking like: import Vue from 'vue/dist/vue.esm.js'

0👍

you dont need to change all the tags, just use {% raw %} tag, for example:

{% raw %}
  <div>
   <div>{{value}}</div>
  </div>
{% endraw %}

Leave a comment