How to solve double curly brackets issue when using Vue + Django template language?

Question

I am using Django template language and would like to use Vue on my project. One main problem I encountered is {{...}} syntax. My Vue data is not rendered at all.

<div id="app">{{ message }} // This is just empty on my page </div>

And I am just using this basic Vue script:

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

How do I solve this?

Answer 1

What glenfant said is easy, but this is even easier.

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

That’s all: you configure Vue with the tag it should use to work. :) I use just one brace – {…} – but you can use doubled square brackets, too: [[ and ]].

Answer 2

Use the verbatim template tag. https://docs.djangoproject.com/en/1.11/ref/templates/builtins/#verbatim

<div id="app">{% verbatim %}{{ message }}{% endverbatim %}</div>