PHP
JavaScript
laravel
vue.js

LaravelからVue.jsを使う最短レシピ

Laravel から最短でVue.jsを使う

インストールから動かして本番投入まで一通りっていうのが見つからなかったのでまとめてみる。
知らないとわかんないよそんなの!みたいな罠がそこかしこに。

TL;DR

今回の環境

  • macOS High Sierra
  • PHP 7.2 (composerがインストールされている)
  • Node.js (というよりnpm)
  • Laravel 5.6 (Laravel 5.4以降ならVueはバンドルされているみたい)

インストール編

Installation - Laravel - The PHP Framework For Web Artisans

↑とかに従ってまずLaravelのプロジェクトを作る。

composer create-project --prefer-dist laravel/laravel blog

それからpackage.jsonがあるので、npmからnode_modulesをインストールする。

cd blog
npm install

インストール編はこれでおしまい。

LaravelでVueを使う編

php artisan serve とかでサーバーを建ててもVueのコンポーネントのビルドをしていないし、
bladeからVueのコンポーネントを呼び出すようなところもどこにもない。

bladeの修正

ポイントは3つ。

<!-- Headタグ内に足す -->
<meta name="csrf-token" content="{{ csrf_token() }}">

Laravelがセキュリティを高めるために「ajax通信をするときはcsrfトークンをいつも使いましょうね」
っていうデフォルト設定がbootstrap.jsに書いてあるんだけどblade側にtokenが埋め込まれてない。なんでだろう?

<!-- Headタグ内に足す -->
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">

{{mix('パス')}} が、Laravelのアセットのパスをいい感じに解決してくれる。

<div id="app">
    <!-- デフォルトだとこの中ではvue.jsが有効 -->
    <!-- example-component はLaravelに入っているサンプルのコンポーネント -->
    <example-component></example-component>
</div>
<!-- body タグの最後に足す-->
<script src=" {{ mix('js/app.js') }} "></script>

vue.jsのコンポーネントetcをロードするapp.jsは最後に読み込む。
具体的には、すべてのコンポーネント用のタグ(今回だと #app)のあとに読み込まないと、
vue.jsのルートインスタンスが目的のDOMを捕まえられなくて死んでしまう。

起動

Vue.js開発は、Laravelのartisan serveと別にコンポーネントのコンパイルが必要。
ローカル環境で開発するなら下記のコマンドで開発すると幸せになれる。

npm run hot #vue cliでいうところの npm run dev相当。HMR!

npm run hot するとHot Module Reload(HMR)有効な状態でビルドされる。
つまりどういうことだってばよって、編集するとリアルタイムで結果が反映されてめっちゃ開発めっちゃ捗る!

HotModuleReloading.gif

めちゃくちゃ開発が捗るようになるので是非。

また、開発/ステージングサーバーや本番にデプロイする時は以下のコマンドでビルドする。

#開発デプロイ時
npm run dev # npm run develop のショートハンド
#本番デプロイ時
npm run prod # npm run production のショートハンド

やったねLaravelでVueが使えるようになったよ!

php artisan serve # Laravelの開発サーバーをlocalhostで立ち上げ

localhost:8000 にアクセスしてExample Componentが表示されていることを確認する。

Laravelの変数をVueに渡す

そうはいっても、Laravel側からVueへ変数を渡せないとイケてないよねということで方法2通り。

リクエスト時にサーバーサイドでJavascriptとして変数をレンダリングする

ここでいうのはいわゆるフロントエンドの文脈のSSRとは全く別物なので注意。

コントローラーからbladeに変数を渡して、scriptタグを書いてそこから渡すやり方。
vue側はコンポーネントのdataから受け取る。

↓のパッケージを入れるととってもいい感じみたい。
laracasts/PHP-Vars-To-Js-Transformer: Transform PHP data to JavaScript.

ajaxリクエストを投げて結果を受け取る

Laravel側にAPIを用意して、Ajaxで必要なパラメータを集めてきてレンダリングする。

なんか適当によしなにするといい。

途中で力尽きた感が凄まじいので後ほど加筆するかも

参考

こんな記事書いてます