Laravel-uiでvue.jsを使う方法
Laravel で Vue 利用のセッティング
Laravel に Vue を導入し、Blade に組み込んだりする方法を記載します。
大まかな手順は下記となります。
- Laravel のインストール
- Laravel-ui の導入
- Vue の導入
- Laravel Mix の導入
- (必要に応じて)Bootstrap の導入
必要環境
下記は事前にインストールしておいてください。
- php
- Composer
- DB 環境(MySQL など)
- node
- npm
Laravel のインストール
下記コマンドでプロジェクトを作成します。
composer create-project laravel/laravel [プロジェクト名] --prefer-dist
Laravel-ui のインストール
下記コマンドで Laravel-ui をインストールします。
composer require laravel/ui
Vue のインストール
Laravel-ui がインストールされたので、Vue を導入します。
php artisan ui vue
※もし、認証機能も一緒に入れたい場合は --auth オプションをつけると認証機能も合わせて導入されます。
すでに Laravel をインストールした際に、package.json があるため、そこに Vue の記載が出来上がります。
Laravel Mix の導入
Laravel Mix とは、フロントのアセットをコンパイルするツールのことです。
デフォルトの package.json ファイルには、Laravel Mix の使用を開始するために必要なすべてのものがすでに含まれています。
先程の Vue インストールで、この中に Vue の導入も含まれるようになったので、下記コマンドでインストールを実施しましょう。
npm install
Vue はコンパイルで使用ができるようになります(Webpack)
Laravel Mix を使うことで簡単に Webpack を使うことができるようになっています。
そのため、下記コマンドで全ての Mix タスクの実行(コンパイル)を実施しましょう。
resources ディレクトリ以下のファイルがコンパイルされます。
npm run dev
本番環境とかに上げる前は必ず下記を実行しましょう。(圧縮)
npm run prod
アセットの変更を監視しながらの場合は下記コマンドを実行します。
npm run watch
コンパイル設定
コンパイルの設定については、webpack.mix.js に書かれています。
下記設定によって、resources/js/app.js'がpublic/jsにコンパイルされたファイルをおくディレクトリになりります。
また、resources/sass/app.scssがpublic/cssにコンパイルされたファイルをおくディレクトリと言った設定になっています。
mix.js('resources/js/app.js', 'public/js').vue({ version: 2 })
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
Vue のコンパイル
Laravel Mix では、vue メソッドを使用することで、Vue 単一ファイルコンポーネントのコンパイルサポートに必要な Babel プラグインを自動的にインストールします。
JavaScript がコンパイルされたら、アプリケーションから参照できるようになります。
<head>
<!-- ... -->
<script src="/js/app.js"></script>
</head>
Vue の単一ファイルコンポーネントの利用
Vue ファイルを利用する場合について明記します。
Vue のサンプルファイルがresources/js/components以下にExampleComponent.vueとして置かれています。
このディレクトリに置くことで、Laravel Mix のタスク実行で自動的にコンパイルされます。
Blade ファイルで利用するためには、resources/js/app.jsに以下を追記する必要があります。
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
// コンポーネントを作ったら下記にどんどん追記する。
Vue.component('ケバブケースでの記述', require('./components/vueファイル名').default);
Blade ファイルでは下記のように記述して利用します。
<example-component></example-component>
この時、resources/js/app.js では下記のように記載されています。
const app = new Vue({
el: '#app',
});
そのため、id="app"タグの中で vue ファイルを使う必要があります。
Blade ファイルの親をid="app"で括ってあげれば Vue の単一ファイルコンポーネントをどこでも利用できるようになります。
(補足)Bootstrap のインストール
Bootstrap も Laravel-ui で簡単に導入できます。
php artisan ui bootstrap
参考記事
Discussion