[Fixed]-How to solve double curly brackets issue when using Vue + Django template language?


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



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

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


In your base template, you can add this line:

 <script>Vue.config.delimiters = ['${', '}'];</script>

Then you will able to use %{...} for Vue, {{...}} for django.

Leave a comment