Laravel 5.xではComposerでインストール時にVueも一緒にインストールされたのですが、Laravel 6.xでは手動でインストールする必要があるようでした。
5.x→6.xのアップデートで少し戸惑ったのでメモしておきます。尚、Composerが既に導入されている前提ですので、ご注意下さい。
そしてVuetifyも導入するとリッチなデザインが簡単に実装できます。Vuetifyの導入方法は別で記事を書いております。
手順
Laravelの導入
まずはLaravelを導入します。
任意のディレクトリでプロジェクトを作成する。
$ composer create-project --prefer-dist laravel/laravel laravel_vue
prefer-distオプションについては公式ドキュメントに説明がありますが、(アーカイブが存在する場合)アーカイブをダウンロードする為、インストールが高速化するメリットがあります。
laravel/uiパッケージの導入
$ cd laravel_vue/ $ composer require laravel/ui "^1.0" --dev
2020/03/21 追記
Laravel/ui 2.0がリリースされ、バージョン未指定の場合はlaravel/ui 2.0がインストールされます。
laravel/ui 2.0はlaravel6.xに対応していない為、”^1.0″でバージョン指定が必要となります。
uiパッケージを導入すると、フロントエンドのスカフォールドをインストール可能になります。
スカフォールド(scaffold)は足場などのニュアンスがある単語なので、足場、雛形という意味合いでしょうか。
vueのスカフォールドを生成
$ php artisan ui vue
resources/js/components/にサンプルのVueコンポーネント(ExampleComponent.vue)が生成されます。
必要なパッケージをインストール
$ npm install && npm run dev
npm installコマンドでvue、vue-template-compiler等がプロジェクトにインストールされ、npm run devコマンドでvueコンポーネントがコンパイルされます。
Vueコンポーネントをビュー(bladeファイル)で使用する
上記で使用する準備が整いましたので、実際にビュー側でVueを使用してみます。
welcome.blade.php
<body> (省略) <div id="app"> <example-component></example-component> </div> <script type="text/javascript" src=" {{ asset('/js/app.js') }}"></script> </body>
Laravelインストール時に生成されるwelcome.blade.phpにVueコンポーネントの呼び出しと、コンパイルされたJavaScriptの呼び出しを追加します。
開発用サーバーを起動して確認します。
$ php artisan serve
「Laravel」のタイトルと各リンクの間に、追加したVueコンポーネントが表示されている事が確認できました。
以降、Vueコンポーネントの追加/変更が発生した場合は、npm run devコマンドでコンパイルします。npm run watchコマンドで監視も可能です。
参考
上記はLaravelドキュメントの日本語訳をしている以下のWebを参考にしています。