【Vue3×Laravel8】開発環境の構築について

2021年 11月 26日

タグ：

Laravel

Vue.3

環境構築

LaravelとVueを組み合わせてアプリケーションを作るための環境構築を行っていきます。

参考:Laravel8でVue 3を使う

最新のLaravel8をインストール

Vue3を使いたいので今まで使ってきたLaravel6ではなく最新Laravel8を使います。古いバージョンを使うと不具合が起こる気がするからです。

参考：Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録

バージョン指定をする必要がないので下記のコマンドでダウンロードしました。11月22日現在の最新バージョンはLaravel8.6.4 でした。

composer create-project laravel/laravel --prefer-dist laravel_sample

laravel/ui及びVueをインストール

続いて、Laravel上でフロントエンドを開発する環境をサクッと作ってくれるlaravel/uiをインストールします。

これもバージョンを指定なしで、サクッと下記のコマンドでダウンロードします。

composer require laravel/ui

このlaravel/uiを使ってvueをインストールする準備をします。

php artisan ui vue

package.jsonを変更してインストールする。

laravel/uiによって作られるpackage.jsonはこんな感じですが、そのままinstallしてしまうとvue２が入ってしまうので変更します。

また、他にも不要であると思うものは削除してください。

    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",<-6.0以上であることを確認
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vue": "^2.6.12",<-必ず削除
        "vue-template-compiler": "^2.6.12"<-必ず削除
    }

変更が完了したらインストールします。

npm install

Vue3をインストールする。

インストールが完了したら、Vue3をインストールします。

npm install -save-dev vue@next

package.json

    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vue": "^3.2.26",<-追加された
    }

このファイルの設定後installとdevを行います。

npm install && npm run dev

そうすると一度エラーになりますが、package.jsonに'vue-loader'が追加されます。

package.json

    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vue": "^3.2.26",
        "vue-loader": "^16.8.3"<-追加された
    }

この後にさらにinstallとdevを行います。

npm install && npm run dev

mix完了

Laravelの実行

Laravelを実行して、動作を確認します。

php artisan serve

BladeにVueコンポーネントを追加するポイントを作る

welcome.blade.phpにVueコンポーネントを追加できるように、appのid属性と、js/app.jsの読み込みを追加します。

resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="js/app.js"></script>
</body>
</html>

Vue3に設定を変更する

デフォルトではVue2のままなので、Vue3に書き換えていきます。

resources/js/app.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Vueコンポーネントの追加

app.jsで呼び出しているApp.vueとそこから呼び出すHelloWorld.vueをサンプルとして作ります。

resources/js/App.vue

<template>
  <div>
    {{ data.message }}
    <HelloWorld />
  </div>
</template>

<script>
import { reactive } from "vue";
import HelloWorld from './components/HelloWorld'

export default {
    name: 'App',
    components:{
        HelloWorld
    },
    setup(){
        const data = reactive({
            message :'Hello Vue!'
        })
        return {
            data
        }
    }
};
</script>

resources/js/components/HelloWorld.vue

<template>
  <div>
    {{ data.message }}
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
    name:'HelloWorld',
    setup(){
        const data = reactive({
            message :'Hello Laravel!'
        })
        return {
            data
        }
    }
};
</script>

npm run watchの実行

ここまで書けたら、2つ目のターミナルを立ち上げ、vueをコンパイルを行います。

npm run watch

以上でlaravelのサーバーでVueのコンポーネントに書いた内容が表示できていれば、Laravel8とVue3が連携したことが確認できます!

おまけ：手っ取り早く作るなら

このリポジトリをクローンしてください。https://github.com/tukki0210/vue3_laravel8_start

そのあと、Laravel関係のライブラリのインストールを

composer install

Vue関係のライブラリのインストールを

npm install && npm run dev

で行えると思います。