How to render by Vue instead of Jinja

The other option is to redefine the delimiters used by Vue.js. This is handy if you have a lot of existing template code and you wish to start adding Vue.js functionality to a Flask or Django project.

var app = new Vue({  el: '#app',  data: {    message: 'Hello Vue!'  },  delimiters: ['[[',']]']})

Then in your HTML you can mix your Jinja and Vue.js template tags:

    <div id="app">      {{normaltemplatetag}}      [[ message ]]     </div>

Not sure when the "delimiters" property was added, but it is in version 2.0.

You need to define parts of your template as raw so that Jinja escapes that portion instead of trying to fill it up with its own context.

Here is how you need to do it:

<template id="task-template">  <h1>My Tasks</h1>  <tasks-app></tasks-app>  <ul class="list-group">    <li class="list-group-item" v-for="task in list">        {% raw %}{{task.body|e}}{% endraw %}    </li>  </ul></template>

Ref: http://jinja.pocoo.org/docs/dev/templates/#escaping

If you're using Flask, you can redefine the delimiters used by Jinja:

class CustomFlask(Flask):    jinja_options = Flask.jinja_options.copy()    jinja_options.update(dict(        variable_start_string='%%',  # Default is '{{', I'm changing this because Vue.js uses '{{' / '}}'        variable_end_string='%%',    ))app = CustomFlask(__name__)  # This replaces your existing "app = Flask(__name__)"