В приложениях VueJS используется {{ varname }} для обработки шаблонов. В Jinja2 и Django шаблонах при рендеринге шаблона также используются фигурные скобки. Из-за этого возникает конфликт. Есть 3 способа решения проблемы.
VueJS — заменить фигурные скобки на что то другое
<!-- js файл -->
new Vue({
delimiters: ['{*', '*}'],
data: {
VueVAR: 'test'
}
})
<!-- html файл -->
<div id="app">
{* VueVAR *} <!-- vuejs -->
{{ name }} <!-- переменная в Jinja2 или Django шаблоне переданная из views.py -->
</dev>
Использовать RAW в html для Jinja2
<!-- js файл -->
new Vue({
data: {
VueVAR: 'test'
}
})
<!-- html файл -->
<div id="app">
{{ VueVAR }} <!-- vuejs -->
{% raw %}
{{ name }} <!-- переменная в Jinja2 из views.py -->
{% raw %}
</dev>
Для Django templates поменять фигурные скобки
# в файле setting.py
VARIABLE_TAG_START = '{*'
VARIABLE_TAG_END = '*}'
<!-- js файл -->
new Vue({
data: {
VueVAR: 'test'
}
})
<!-- html файл -->
<div id="app">
{{ VueVAR }} <!-- vuejs -->
{* name *} <!-- переменная в Django template из views.py -->
</dev>
Ещё для Django использовать тег {% verbatim %}
<!-- html файл -->
<div id="app">
{% verbatim %}
{{ VueVAR }} <!-- vuejs -->
{% endverbatim %}
{{ name }} <!-- переменная в Django template из views.py -->
</dev>
Для Django последний способ рекомендуют использовать в большинстве случаев.