Flask(jinja2) + vue.js でmustache記法( {{ }} )の衝突回避

flaskで使用しているHTMLテンプレートエンジンのJinja2とvueでは、変数展開の記述が共にマスタッシュ（mustache）記法になっているため、以下の書き方をするとflaskがエラーにしてしまいます。

<!-- vue側のみで定義した変数を出力させたい -->
{{ hoge }}

その回避方法としてflask, もしくはvueで展開の指定をするdelimiter(デリミタ：区切り文字)をデフォルトの {{ }} から変更してあげれば解消します。

vue.jeでデリミタ変更

vue 2系

vueインスタンス生成時に引数オブジェクトにdelimitersを追加することで変更可能です。

new Vue({
  delimiters: ['${', '}']
})

// デリミタを ES6 template string のスタイルに変更する

https://jp.vuejs.org/v2/api/index.html#delimiters

ただ、上記の設定ではvue.extend() で生成したコンポーネント内ではデリミタが変更されませんでした。
その場合は、vue.extend() の引数オブジェクトにdelimitersを追加する必要があります。

Fuga = vue.extend({
  delimiters: ['[[', ']]']
});
// デリミタを [[ ]] に変更

vue 1系

vueの1系では指定方法が異なるようです。（動作未確認）

Vue.config.delimiters = ['${', '}'];

Flaskでデリミタ変更

jinja2の設定を上書きすることで変更可能です。
flaskアプリケーションディレクトリの__init__.pyでFlaskインスタンス生成を以下のように変更することでデリミタを {{ }} から (( )) に変更できました。

# flask application/__init__.py
from flask import Flask

class CustomFlask(Flask):
    jinja_options = 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='#>',
    ))


def create_app():
    app = CustomFlask(__name__)
    return app

以上、Flask(jinja2) + vue.js におけるマスタッシュ（mustache）記法の衝突回避方法でした。