По умолчанию Jinja использует в качестве тега переменных двойные фигурные скобки, например:

<div>
  {{ jinja_variable }}
</div>

Это хорошо, но в случае использования Vue.js возникают проблемы, ведь для экранирования собственных переменных в HTML–разметке он также использует двойные фигурные скобки:

<div>
  {{ vue_variable }}
</div>

Подобная ситуация приводит к тому, что после шаблонизации со страницы исчезают все переменные в двойных фигурных скобках, которые могут относится к Vue.

Решением проблемы является переопределение тегов для Jinja. Один из способов сделать это — обновить копию словаря опций jinja_options статического объекта Flask в модуле flask, присвоить эту копию свойству jinja_options инстанцированного объекта Flask и пересоздать окружение Jinja для этого объекта с помощью функции create_jinja_environment().

Например, следующий код переопределяет теги блока, переменных и комментариев:

import flask

app = flask.Flask(__name__)
...

jinja_options = flask.Flask.jinja_options.copy()
jinja_options.update(dict(
    block_start_string='<%',
    block_end_string='%>',
    variable_start_string='%%',
    variable_end_string='%%',
    comment_start_string='<!--',
    comment_end_string='-->',
))
app.jinja_options = jinja_options
app.create_jinja_environment()

После этого в одном шаблоне можно будет использовать переменные и для Jinja, и для Vue:

<div>
  %% jinja_variable %%
</div>
<div>
  {{ vue_variable }}
</div>