Laravel6.xでVueを導入する手順を解説

  • 2020.02.17
  • PHP
Laravel6.xでVueを導入する手順を解説
                 
最終更新日から90日以上経過しています。

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を参考にしています。

PHPカテゴリの最新記事