jinja2와 vuejs 혼용하여 사용하기

배경

내용이 그리 많지는 않다. vuejs 와 jinja2에서 '{{', '}}'해당 기호 용도가 중복이 된다. 때문에 같이 혼용하기 위해서는 해당 기호를 바꿔야 한다.

다행스럽게도 vuejs의 경우 JavaScript 기반이다 보니 문법을 parsing 하는 delimiters 를 변경할 수 있다.

<!-- jinja2 -->
<div id="app">
    {% set val = hello -%}
    <span>[[ {{ val }} ]]</span>
</div>

// javascript
let app = new Vue({
    el: "#app",
    data: {
        hello: "world"
    },
    delimiters: ['[[', ']]']
});