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?

Answer 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.

Answer 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

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

Answer 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.

Answer 5

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

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

Answer 6

Configure Vue v2 class instance with the 'delimiters' option:

<div id='myapp'> !{ message } </div>
<script>
let myapp = new Vue({ delimiters: ['!{', '}'], ...});
</script>

Source: https://v2.vuejs.org/v2/api/#delimiters

Answer 7

You can use directives

<h3 v-text="message"></h3>

Or you can use delimiters

const app = new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: {
    message: 'a vue message'
    },
});

In your html page

<h3>${ message }</h3>

Answer 8

you can use {% raw %} {% endraw %} in your html code

Answer 9

I know this is old post, and however @Nathan Wailes answer helped me. I further tried avoiding moustaches {{myVal}} and used v-text="myVar" for rendering text. And I did not need to override jinja delimiters. see example below:

<!--Vuetify-->    
<v-btn class="ma-2" outlined color="indigo" v-text="connectToggleLabel"></v-btn>
<v-btn class="ma-2" outlined color="indigo"><span v-text="connectToggleLabel"/></v-btn>
<!-- basic -->
<input type="button" :value="connectToggleLabel"/>

Hope this help somebody