【Laravel6 / Vue2】Laravel6+Vue.jsの連携手順

Laravel6とVue.jsを連携して、APIを実行するまでの手順を、メモがてら手順をまとめてみました。

SPAを作成しようとしている方などのご参考になれば嬉しいです😄

> ### バージョン
> composer: 2.2.7
> php: 7.4.28
> laravel: 6.20.44
> npm: 6.14.12
> node: 14.16.1
> vue: 2.5.17
> vue-router: 3.1.3


## laravelプロジェクト作成
~~~bash
composer create-project "laravel/laravel=6.*" {プロジェクトのお名前} --prefer-dist
~~~

## プロジェクトのディレクトリに移動して、以下コマンド実行
~~~bash
php artisan serve
~~~
- 以下のようなログが出力されます。出力されるURLをコピーしておきましょう。
~~~bash
Laravel development server started: {ここに出力されるURLをコピー!}
~~~
- コピーしたURLにブラウザでアクセスしてみて、以下のようにlaravelの初期画面が表示されていればLaravelの起動は完璧です！

![スクリーンショット 2022-06-18 21.44.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/996bf512-4acc-0dfe-19b2-b07b6b2c5a82.png)



## laravel uiインストール
- Laravel UIとは、フロントエンドのフレームワーク(Vue,Reactなど)をLaravelで使用できるようにしてくれるライブラリです
- 以下コマンドでインストールしましょう
※laravel6の場合、laravelUIのバージョンを1系で指定しないとエラーになります！
~~~bash
composer require laravel/ui:1.2.0
~~~

## laravel uiでvueをインストール
- 今回はVueを使ってフロントエンドを実装していくので、以下コマンドを実行しましょう
~~~bash
php artisan ui vue
~~~

## 必要なnpmのインストールして、コンパイル
- Laravel UIでVueを設定できたら、以下npmスクリプトを実行して必要なライブラリなどをインストールして、コンパイルします
~~~bash
npm install && npm run dev
~~~
- `npm run dev`で実際に実行しているコマンドは以下になります(こちらは実行しなくて大丈夫です)
~~~bash
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js
~~~

## `.gitignore`の編集
- もしプロジェクトをGitにあげている場合は、コンパイル後のファイルをGitの監視対象から外してもよいかもです
- ルートディレクトリにある`.gitignore`に`/public/js`と`/public/css`を追加しましょう
~~~bash:.gitignore
/node_modules
/public/hot
/public/storage
/public/js
/public/css
/storage/*.key
/vendor
.env
.env.backup
.phpunit.result.cache
Homestead.json
Homestead.yaml
npm-debug.log
yarn-error.log
~~~

## `resources/routes/web.php`の編集
- どんなルートにアクセスしても、`welcome.blade.php`に遷移するようにします
~~~php:web.php
// 変更前
Route::get('/', function () {
    return view('welcome');
});

// 変更後
Route::get('/{any?}', function () {
    return view('welcome');
})->where('any', '.*');
~~~

## vue-routerのインストール
- VueのルーティングをしてくれるVueRouterをインストールしましょう(VueRouterの詳しい説明は割愛します...)
- VueRouterは、Vueとのバージョン依存があります！今回のVueのバージョンは2なのでVueRouterのバージョンは3を指定してインストールします
~~~bash
npm install vue-router@3.1.3
~~~

## `router.js`を作成
- `resources/js`ディレクトリ配下に、VueRouterのルーティング設定を記載する`router.js`を作成します
- ザックリ説明をすると、`path`にパスを指定して、`component`に対象のパスに遷移した際に表示するコンポーネント、`name`にこのルートを呼び出す時に使用することができる名前を設定している感じです

~~~javascript:router.js
import Home from "./components/Home";
import VueRouter from "vue-router";

const routes = [
    {
        path: "/",
        component: Home,
        name: "HOME"
    }
];

const router = new VueRouter({
    mode: 'history',
    routes,
});

export default router;
~~~

## `resources/js/app.js`を編集
- `app.js`は一番大事なファイルです。ここにVueの色々な設定を書いていきます
- ライブラリやモジュールを使いたい際は、ここでインポートすることが多いです
- 開くと、以下のように、色々ゴチャゴチャ書いてあります
~~~javascript:app.js
/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
});

~~~

- 以下のように書き換えましょう
- 先ほど作成した`router.js`(Vueルータの設定ファイル)を使えるように、読み込んであげています

~~~javascript:app.js
require('./bootstrap');

import router from "./router";
import VueRouter from "vue-router";

import Vue from 'vue';
Vue.use(VueRouter);

const app = new Vue({
    el: "#app",
    router
});
~~~

## `resources/views/welcome.blade.php`の編集
- headerにapp.jsを読み込む`script`タグを追加して、bodyの中は、idがappの`div`タグと、`router-view`というタグだけにします
- この`router-view`タグは、この範囲内はVueRouterでルーティングをしますよ〜というタグです。VueRouterを使用する際は必ずこのタグを使用します

~~~~html:welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel+Vue</title>
        <script defer src="{{ mix('js/app.js') }}"></script> 
    </head>
    <body>
        <div id="app">
            <router-view><router-view/>
        </div>
    </body>
</html>

~~~~

- ユーザーには常に`welcome.blade.php`を表示して、その中のdivタグ(id="app")に、`resources/js/app.js`でVueインスタンスを入れ込んでいるようなイメージです

![スクリーンショット 2022-06-19 12.19.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/470d8eab-9cf4-7288-6e42-c7e5dcc4b3ff.png)


## `resources/js/components/Home.vue`を作成
- Vueコンポーネントの細かい説明に関しては、今回は割愛させていただきます...
- `resources/js/components/`ディレクトリ配下に`Home.vue`を作成して、以下のように編集しましょう
- 画面に「Hello, Vue.js!」という文字列を表示しています
~~~html:Home.vue
<template>
<div class="container">
  <h1>Hello Vue.js!</h1>
</div>
</template>
<script>
export default {
  data () {
    return {};
  }
}
</script>
<style scoped>
.container {
  margin: auto;
  width: 60%;
  padding: auto;
}
</style>
~~~

## プロジェクトのディレクトリで以下コマンドを実行
- 以下のnpmスクリプトを実行することで、フロントエンドの変更を検知して勝手にコンパイルしてくれるようになります
~~~bash
npm run watch
~~~
- 実際に実行しているコマンドは以下になります(こちらは実行しなくて大丈夫です)
~~~bash
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js -- --watch
~~~
- ブラウザをリロードしてみて、以下のようにうまく`Home.vue`の内容が表示されていればVueとLaravelの連携は完了です！🔥

![スクリーンショット 2022-06-19 12.39.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/12c0ce89-2fe4-e950-7994-79f3efbcba2a.png)



## APIを実装してみましょう！
- それでは、LaravelでAPIを作成して、Vueからそれを実行してみましょう
- APIの実行の流れは、以下のようなイメージです

![スクリーンショット 2022-06-18 22.52.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/a558902c-4c77-a3b7-850d-897ca7082ce1.png)
1. Laravelの`api.php`にAPIのエンドポイント,実行するコントローラ,メソッドを定義します
2. 実際の処理をコントローラに書きます
3. Vueからはaxiosを使ってAPIを実行します。(axiosはVueをインストールした際に一緒にインストールされている為、デフォルトで使用可能になっています!)


## `api.php`を編集
- エンドポイント`test`にアクセスされた場合、`TestController`の`index`メソッドを実行するルートを作成します
~~~php:api.php
Route::get('test', 'TestController@index');
~~~
- `api.php`で定義されたルートには、`/api`URIプレフィックスがデフォルトで適用されています。VueでAPIを実行する際は、axiosのURLには`/api`の後に`api.php`で指定したエンドポイントを入れましょう
- 今回の場合、`api.php`で定義したルートのエンドポイントが`test`なので、実際にAPIを実行する際は、`/api/test`という感じでURLを指定します
~~~javascript
axios.get('/api/test').then((response) => {
  // 成功処理
}).catch((error) => {
  // 失敗処理
});
~~~

## `TestController`を作成
- 以下コマンドを実行して、コントローラを作成します
~~~bash
php artisan make:controller TestController 
~~~

- `TestController`が作成されたら、以下のように編集してください
- 単純に`Hello API!`という文字列を返すメソッド`index`を作成しています
~~~php:TestController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TestController extends Controller
{
    public function index () {
        return 'Hello API!';
    }
}

~~~

## `Home.vue`からAPIを実行
- それではVueからAPIを実行する準備をしましょう
- `Home.vue`を以下のように編集しましょう
~~~html:Home.vue
<template>
<div class="container">
  <h1>Hello Vue.js!</h1>
  <button @click="executeApi()">APIを実行</button>
  <h2>Data: <span style="color:red;">{{ apiData }}</span></h2>
</div>
</template>
<script>
export default {
  data () {
    return {
      apiData: ''
    };
  },
  methods: {
    executeApi () {
      axios.get('/api/test').then((response) => {
        this.apiData = response.data;
      }).catch((error) => {
        console.error(error);
      });
    }
  }
}
</script>
<style scoped>
.container {
  margin: auto;
  width: 60%;
  padding: auto;
}
</style>
~~~
- ボタンを押すと、メソッド`executeApi`が実行されます
- `executeApi`の中で、axiosを使用してAPIを実行します
- 正常終了で、`data`の`apiData`にレスポンスの内容を入れます

## ブラウザで動作確認
- ブラウザにアクセスしてリロードしてみると、以下のような画面が表示されます

![スクリーンショット 2022-06-19 12.40.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/ad2db8cc-ed2a-8b81-daa6-60a16d128064.png)


- 「APIを実行」ボタンを押下して、実際にAPIを実行してみましょう!
- 以下のように、`apiData`がAPIの実行結果に更新されて以下のような表示になれば、APIの実装が完了です🔥

![スクリーンショット 2022-06-19 12.40.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/c9bdb1eb-3eb0-2dce-258f-40033ba13daf.png)



## 実装完了🔥
以上でLaravelとVueの連携、APIの実装が完了しました!

今回は単純に文字列を返すAPIを実装しましたが、mysqlなどのデータベースと連携させて、APIを通してデータベースの値をあれこれすることも可能です!その実装方法もいずれ書いてみようと思います。

ご指摘、質問等ありましたら、是非コメントお願いします。

読んでいただき、ありがとうございました!