Vue and Django mustache templating conflict

user_13981530 0
Viewed 709

I am planning to do a project with Vue in the frontend and Django in the backend, but they both use double curly braces {{ }} as their template tags. Is there an easy way to change one of the two to use some other custom templating tag?

Thanks in advance.

vue.js django-templates django javascript
2 Answers

Vue has a parameter called delimiters which set the placeholder's delimiters. For example this way you'll set them to double square brackets:

new Vue({
    delimiters: ['[[', ']]'],
    el: "#myapp",
    //...
})


<div>
   {{ djangoPlaceholder }}
   [[ vuePlaceholderValue ]]
</div>
user_2177230

If you don't want to change the delimiters in Vue you can use the verbatim Django tag to prevent the braces from being interpreted:

{% verbatim %}
    {{ myvuevar }}
{% endverbatim %}

This is a quick and simple approach that might suffice. It has the disadvantage that you cannot render Django variables within the verbatim tags (of course).

user_15855720
Related