🍣

Laravel-uiでvue.jsを使う方法

2022/05/01に公開約2,600字

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.scsspublic/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

参考記事

https://readouble.com/laravel/8.x/ja/mix.html
GitHubで編集を提案

Discussion

ログインするとコメントできます