はじめに

PHPのフレームワークであるLaravelで作成したアプリケーションに
JavaScriptのフレームワークであるVue.jsを連携させる方法について説明します。

Node.jsのインストール

Node.jsのパッケージ管理ツールnpmを使うので、
Vue.jsを利用するためにはNode.jsが必要です。

まず、https://nodejs.org/ja/からインストールしましょう
推奨版、最新版どちらでも構わないので、インストールしてください。

Vue.jsをアプリケーションへインストールする

インストールするパッケージ一覧が記述されているpackage.jsonを変更した後、
npmを使ってVue.jsをインストール、ビルドします。

package.jsonの変更

package.jsonにはインストールするパッケージがリストとして記述されています。
Vue.js関連のパッケージはvue、vue-template-compilerです。

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19.0",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.2.0",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "tar": "^4.4.8",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "node-sass": "^4.12.0",
        "quill": "^1.3.6"
    }
}

Vue.jsのインストール

上のパッケージをインストールしましょう

ターミナル

$ npm install

Vue.jsのビルド

インストールしただけではVue.jsは使えないので、ビルドしていきましょう

ターミナル

$ npm run dev

コンポーネントの登録

作成されたコンポーネントをしましょう

resources/app.js

require('./bootstrap');

window.Vue = require('vue');

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

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

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

上記の記述でresources/js/components/ExampleComponent.vueを
example-componentという名前で登録します

ビルド

Vue.js関連のファイルを変更した時はビルドしなければ、変更は反映されません。

ターミナル

$ npm run dev

コンポーネント

サンプルのコンポーネントを確認しましょう
ない場合は手動で作成してください

resources/js/components/ExampleComponent.vue

<template>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Example Component</div>
                <div class="card_body">
                    I'm an example component.
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mouted() {
            console.log('Component moundted.')
        }
    }
</script>

内容については関係ないので、今回は説明を省きます。
単純なことなので、時間がある時に一度見てください。

ビューファイルでテンプレートを参照する

コンポーネントをビューファイルで参照する方法について説明します。
適当なファイルに挿入して見てください

resources/views/****.blade.php

<head>
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" type="text/css">
    <meta name="csrf-token" content="{{csrf_token()}}">
</head>
<div id="app">
    <example-component></example-component>
</div>
<script src="{{ mix('/js/app.js')  }}"></script>

スタイルシート

<link href="{{ mix('/css/app.css')  }}" rel="stylesheet" type="text/css">

linkタグでスタイルシートを参照しています
しかし、スタイルシートはresources/css、public/cssに２つあります。
そのため、mix('/css/app.css")で２つのスタイルシートをまとめて読み込むことができます
　

CSRFトークン

<meta name="csrf-token" content="{{csrf_token()}}">

LaravelでVue.jsを利用する時はCSRFトークンを利用することが推奨されています。
特に理由がない場合は記述しましょう

コンポーネントの参照

<div id="app">
    <example-component></example-component>
</div>

コンポーネントはid="app"の領域で使用できます
example-componentタグで上で作成したコンポーネントを呼び出します。

スクリプトファイル

<script src="{{ mix('/js/app.js')  }}"></script>

スタイルシートと同様に、mix('/css/app.css")で２つのスクリプトファイルをまとめて読み込んでいます。
必ず<example-component>の下に記述してください。

動作確認

最後に動作確認をしましょう
忘れずにビルドしましょう

ターミナル

$ npm run dev

上記のような内容が表示されれば完了です！！

疑問、気になるところがございましたら、質問、コメントよろしくお願いします！！！