Laravel+vue.jsでエラー"Use of undefined constant message"が出る時

Laravelでvue.jsを使用して、vuejs.orgの"はじめに"に書かれている"Hello Vue!"を表示させようとすると、下記のエラーが出ることがあります

作成したhtmlの例

<div id="app">
    {{ message }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

エラーメッセージの例

Use of undefined constant message - assumed 'message'
(View: /path/to/resources/views/index.blade.php)

これは、vue.jsの出力を示す`{{ }}'がLaravelのテンプレートエンジンであるbladeの出力定義と重複しているためです。

解決方法

変数の出力を{{ }}から@{{ }}に変更することで、この問題を回避できます。

<div id="app">
    @{{ message }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

Amazonでおトクに買い物する方法