DjangoでVue.jsを使う方法

はじめに

DjangoのテンプレートにVue.jsを組み込み体時がある。
ただ普通に組み込もうとするとDjangoとVue.jsとでコンフリクトが起きてしまうので注意(以下で解説)

コンフリクトが起きてしまう原因

DjangoとVue.jsでHTMLに組み込む際に{{}}が混同してしまい、
vue.jsの値が反映されなくなるのが原因

解決策

    <div id="vue-app">
        <h1>[[ myTitle ]]</h1>
    </div>

    <script type="text/javascript">
        let app = new Vue({
          el: "#vue-app",
          delimiters: ['[[', ']]'],　　//これが重要
          data: {
            myTitle: 'Hello Vue!',
          },
        });
    </script>

現在、DjangoとVue.jsでのアプリを制作中なのでつまづきやすい部分があればまた投稿します。