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