How to render by Vue instead of Jinja

Question

<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">
            {{task.body|e}}
        </li>
    </ul>
</template>

This above is my html. I want to render the code by Vue instead.

<script>
    Vue.component('tasks-app', {
        template: '#tasks-template',
        data: function() {
            return {
                list: []
            }
        }
        created: function() {
            $.getJson('/api/tasks', function(data) {
                this.list = data;
            })
        }
    })
    new Vue({
        el: 'body',
    });
</script>

The above is my Vue code, and Jinja raise an exception that 'task' is undefined, what I hope for is that the html code rendered by Vue instead of Jinja, I know it could be done in Laravel with this:

"@{{task.body}}"

Since I am new to Jinja, could anyone help me out?

Solution 1

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.

Solution 2

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

Solution 3

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__)"

Solution 4

You can either change default VueJS or Jinja delimiters. I actually prefer to change VueJS delimiters like below:

new Vue({
  el: '#app',
  delimiters: ['${', '}']
})

Then you can use ${variable} instead of conflicting {{ var }}, see docs.

This matches with ES6 template string style, so it is preferable I would say. Keep in mind that you will have to do same when you crate new components.

Alternatively, you could just bypass Jinja template rendering altogether. Just move your index.html from templates directory to static directory (next to css, js files), then:

@app.route("/")
def start():
    return app.send_static_file("index.html")

If you are doing all view logic in VueJS, this can work.

Solution 5

Use {{ '{{ vue }}' }}

I had the same problem, and also got it solved.

View more solutions