javascript - Vue and Django mustache templating conflict - Stack Overflow

admin管理员组

文章数量:1303335

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.

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.

• javascript
• django
• vue.js
• django-templates

Share Follow asked Sep 18, 2020 at 1:43 Safwan SamsudeenSafwan Samsudeen 1,70722 gold badges1212 silver badges2727 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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>

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

本文标签： javascriptVue and Django mustache templating conflictStack Overflow