Появилась такая проблема, есть Django приложение. Частично хотел начать переписывать фронт на Vue, но встала проблема одинакового синтаксиса шаблонизаторов. {{ value }} используется в обоих фреймворках и вроде бы я где-то находил решение подобной проблемы, но к сожалению повторно найти не смог. Vue на первое время тянется из CDN, поэтому делать SPA пока не вариант.
2 ответа
Есть два способа решить эту проблему.
- На стороне Django: Использовать в шаблонах вместо
{{ some_varibale }}
монструозную конструкцию{% templatetag openvariable %} some_varibale {% templatetag closevariable %}
На стороне Vue: Переопределить разделители
var app = Vue({ el: '#app', delimiters: ['[[', ']]'] });
Кажется наиболее удобный способ - все Vue-шаблоны заключить в Django-теги: verbatim:
{% verbatim %}
<modal-dialog>{{header}}</modal-dialog>
{% endverbatim %}
Весь код внутри verbatim будет вставлен в результирующий html "как есть". Далее на стороне браузера Vue спокойно продолжит с ним работать