Django template と Vue.js を使う場合の注意点

html テンプレートエンジンに Django templete を使い，JavaScript 部分を Vue.js で実装しようとして，Vue.js 側のバインディングが全く動かないというトラブルに会いました。

結論から行くと，原因は Django と Vue.js のデリミタが同じだったことです。Django template のデリミタは {{ foo }}で，Vue.js のデリミタも {{ var }}でした。

Vue.js 側のデリミタを [[ var ]]に変更することで解決できました。

問題があるコード

<div class="title">{{ Django 側でバインドした値が出力される }}</div>
<ul class="list">
  <li v-for="item in items">
    <!-- Vue.js で出力されない -->
    {{ item.message }}
  </li>
</ul>

解決済みのコード

new Vue({
  delimiters: ['[[', ']]'], // ここが肝
  data: {
    items: []
  }
});

<div class="title">{{ Django 側でバインドした値が出力される }}</div>
<ul class="list">
  <li v-for="item in items">
     <!-- Vue.js で出力される -->
     [[ item.message ]]
  </li>
</ul>