Laravel 6 でVue.jsやReactを使う

Laravel 6 が先日リリースされました。Laravel 5 との違いとして、プロジェクトの初期化時にVue.jsのリソースが自動生成されなくなりました。そのため、引き続きLaravel 6でも使用したい場合は追加で導入する必要があります。

laravel/uiをインストール

まずはフロントエンドの初期化を行うためのパッケージとしてlaravel/uiというものがありますので、それをインストールします。

composer require laravel/ui --dev

JavaScriptとCSSの生成

uiライブラリを使って各種JavaScript、CSSのファイルを生成します。

Vue.jsを使う場合

下記のコマンドで生成します。

php artisan ui vue

packages.jsonにパッケージが追加されるのでインストールします。

yarn

念の為正常にビルドできるか一度試してみます。

yarn hot

DONE Compiled successfullyと表示されればOKです。hotコマンドの場合はjsファイルを修正すれば自動的にビルド＆リロードを行ってくれるのでこのまま修正して実際に表示してみます。welcome.blade.phpのbodyの閉じタグの前に下記を追記してビルドされたJavaScriptを読み込みます。appというIDの要素内でVue.jsを有効化させているため、その中にコンポーネントを配置しています。

<div id="app">
  <example-component></example-component>
</div>
<script src="{{mix('js/app.js')}}"></script>

これで画面の端っこに表示されます。

Reactを使う場合

下記のコマンドで生成します。

php artisan ui react

packages.jsonにパッケージが追加されるのでインストールします。

yarn

念の為正常にビルドできるか一度試してみます。

yarn hot

DONE Compiled successfullyと表示されればOKです。hotコマンドの場合はjsファイルを修正すれば自動的にビルド＆リロードを行ってくれるのでこのまま修正して実際に表示してみます。welcome.blade.phpのbodyの閉じタグの前に下記を追記してビルドされたJavaScriptを読み込みます。また、コンポーネントはexampleというIDの要素に挿入されるように指定されているため、その要素も表示したい場所に追加しておきます。

<div id="example"></div>
<script src="{{mix('js/app.js')}}"></script>

これで画面の端っこに表示されます。

参考リンク

公式の説明
JavaScript & CSS Scaffolding - Laravel - The PHP Framework For Web Artisans