LaravelでVue.jsは普通に(JQueryみたいに)使えるか検証
2021年08月22日
LaravelとかのPHPのフレームワークを使ってアプリケーションを開発しつつ、フロントエンドの部分はJQueryでなくVue.jsを使って開発したい・・・。
そういう事を考える人は多いと思います。
かなり基本的なことですが、それができるのかどうかを検証してみました。
やってみたこと
- Laravelをインストール
- 最初に表示されるwelcome.blade.phpのテンプレートを貪って、Vue.jsのファイルを読み込んで、実装できるかどうか検証する
- まずは、チュートリアルにあるようなHello、Vueのような表示させるだけの処理を、welcome.blade.php上に実装してみる。
結果
上記の手順をやってみると、駄目でした。
何故かというと・・・
Vueの記法と、Laravelの記法が衝突してしまう
ということです。
具体的にいうと、Vueの場合で変数を扱うのに、htmlの中に
{{ message }}
こういう表記を使うわけですね。
この表記なのですが、LaravelでViewに変数を渡す場合の表記と同じなのです。
つまり、そのままだと、Vueのhtmlの記法とLaravelの記法が衝突してしまい、うまく動作しないというわけです。
Vueの記法の変数の部分が、存在しないみたいなエラーが、Laravelのほうから吐かれてしまうわけです。
しかし、これは、あくまでLaravelのView側でJQueryを使うみたいに気軽に使えるかという点での話なので、Laravel自体はVueに対応しているので、それ用の設定をすれば使うことは可能です・・・が、少々ややこしいです。