Making Django & Vue.js work together with {% verbatim %}

Question

I'm trying to make django & Vue work together even though they share the same {{ X }} template syntax.

I know that from django 1.5 we can use the {% verbatim %} tag. So I thought I could use django templates as usual and in the section where I need VUE to take over I would just use the {% verbatim %} tag. However instead of loading my vue data django loads the {{ variable }}.

For example my django code looks something like this:

{% verbatim %}

<div id='sessions'>
  <h2>{{message}}</h2>
</div>

{% endverbatim %} 

And in my app.js file I have:

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

But instead of rendering Hello Vue! it renders {{message}}

The console doesn't show any error and vue loads correctly otherwise.

How I can make the two work together? Ideally without the need to change the vue.js {{}} syntax.

Answer 1

You can change Vue's interpolation delimiters to whatever you want.

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

That way you can use whatever your framework needs.

Edit

It turned out in this case, @Costantin had more than one div#sessions on the page.