Laravel 6 Vue.jsを利用する [axios][Laravel Mix]

2020年2月9日

PHP

Laravel バージョン6.xで Vue.jsを利用し、またAxiosでJSONデータを取得してみます。

 

まずlaravel/uiパッケージをインストールします。

 

Vue.jsで構築するためのファイル等を生成します。

 

ルートディレクトリにあるpackage.jsonのdevDependencies項目にvue等が追記されているのが確認できます。

 

package.jsonの内容に依存したパッケージをインストールし、コンパイルします。

 

Vueコンポーネント(後述)関連のファイルを編集/保存した際には「npm run dev」で再度コンパイルする必要がありますが、watchでそれら編集/保存を監視しコンパイルを自動化することができます。

 

サーバーを起動させます。

 

 

ルートディレクトリにあらかじめLaravelで用意されているwebpack.mix.jsがありますが、これはwebpackのラッパーであるLaravel Mixの設定用ファイルです。

 

webpack.mix.jsに下記のような記述がありますが、resources/js/app.jsはコンパイルされpublic/jsディレクトリに、resources/sass/app.scssはコンパイルされpublic/cssディレクトリに出力されるよう設定されています。

 

またapp.jsにはすでにVueコンポーネントが登録されているのが確認できます。

resources/js/app.js

example-componentという名前のコンポーネントに対して、componentsディレクトリ以下にあるExampleComponent.vueファイル(後述)が割り当てられています。つまりExampleComponent.vueを利用する場合はexample-componentコンポーネントタグをLaravelのビュー(テンプレート)側に記述します。コンポーネントを作成したらこのようにapp.jsに記述していきます。

 

コンポーネント自体については関連ページをご覧下さい。

Vue.jsのコンポーネント入門

 

 

生成されたcomponentsディレクトリ内にあるExampleComponent.vueファイルを確認してみます。Laravelではこのcomponentsディレクトリ内にVueコンポーネントを配置していきます。

 

resources/js/components/ExampleComponent.vue

単純に文字列と、ログが出力されるだけのコンポーネントです。

 

 

実際にこのExampleComponent.vueコンポーネントを利用してみます。すでに存在するトップ画面に表示させてみます。welcome.blade.phpに下記コードを追記します(ハイライト部分)。

 

resources/views/welcome.blade.php

7行目

Laravel Mixのコンパイルによって出力されたアセットをLaravelのグローバル関数であるmix()を利用して読み込んでいます。

 

24〜27行目

resources/js/app.jsにおいてVueインスタンスのelオプションに指定されているid名がappのdivを用意し、その中に「example-component」コンポーネントタグを記述しています。コンパイルによって出力されたアセットは<div id=”app”>〜</div>の後に読み込みます。

 

画面下にコンポーネントが表示されたのが確認できました。

 

 

 

 

Axiosを利用する


 

新たに画面を作成しAxiosを利用してJSONデータを表示させてみます。JSONはモックデータを提供するサービスであるJSONPlaceholderを利用しています。

 

コントローラーを作成し、ルート情報に追記、後述のようにコントローラーを編集します。Laravelの通常の手順ですので説明は省きます。

 

routes/web.php

 

app/Http/Controllers/TodoController.php

 

 

ビュー(テンプレート)を作成します。todoディレクトリおよびindex.blade.phpをを作成し下記のように記述します。

resources/views/todo/index.blade.php

7行目

本記事では必要ありませんが、フォーム等を利用する場合はCSRF対策をする必要があります。

 

 

app.jsに下記コードを追記して下さい。

resources/js/app.js

todo-componentという名前のコンポーネントに対してTodoComponent.vueを割り当てます。

 

 

TodoComponent.vueを作成し下記のように記述します。

resources/js/components/TodoComponent.vue

 

Axios自体の説明については下記ページをご覧下さい。

axiosでJSONを取得する[Vue.js]

 

 

/todo 画面

 

 

 

参照ページ


 

Laravel 6.x JavaScriptとCSSスカフォールド

 

Laravel 6.x アセットのコンパイル(Mix)

 

 

 

LINEで送る
Pocket

定番本
定期本
 
Copyright © 2020 思考の葉 All Rights Reserved.  プライバシーポリシー