#初めに
この記事は執筆時点での最新版である laravel8.x と LTS である laravel6.x を前提に記述しています。
今回は laravel の blade 構文と javascript の処理の順序について整理したいと思います。
Blade のコンパイル
laravel の blade テンプレートと言えば、@ifなどの表記の記法と{{ $variable }}といった表示の記法が主と思います。
実際には、コントローラ等のレスポンスで
view('(resources/views 以下のパス)');
と記載して返しているかと思います。
この際に帰される実際のページのファイルはHTMLとPHPで構成されたコンパイル済みのファイルです。
標準的な laravel であれば、コンパイル済みのファイルはstorage/framework/views内に格納されています。
（コンパイル済みのファイルのファイル名は元のファイルとは違うので、判別する際は実際にファイルの中身を見て判断する必要があります）
コンパイル済みのファイルと javascript
上記の通り、blade の構文で書いたファイルはサーバーサイドでコンパイルされたうえで内容が解釈され、アクセスしてきたユーザーに返されます。
基本的に画面ファイル内に存在する javascript は、ブラウザが表示を行う際に処理されるため、結果として、
・blade 構文の@ifや@foreachなどで script の内容をダイナミックに制御できる
・view に渡した変数を{{ $var }}を用いて script 内に配置できる
といったメリットが得られます。
このメリットは、javascript 側のプラグインなどで大いに活用でき、views に渡した変数の内容に応じて、javascript 側のプラグインのオプションを制御するなどといったことが行えます。
blade + vue.js
blade 上で vue.js を書く場合も上記と同様のメリットがありますが、表記の衝突などで問題が発生します。
最も頻発する例では、変数の表示が{{ }}で衝突するという問題です。
この問題では、blade 側のコンパイル時に処理される部分は{{ }}を、blade のコンパイル時には処理されずに vue.js で処理されてほしい部分については@{{ }}を用いる必要があります。