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

2023年 01月 23日

タグ：

Laravel

Vue

環境構築

LaravelとVueを組み合わせてポートフォリオを作るための環境構築を行っていきます。

参考:Laravel9のVite環境でVue.js 3を利用する方法

組み合わせる方法について

主にLaravelの現行バージョンでは、主に２つのパターンが存在します。

１.Laravelの上にVueをインストールし、 View層のBladeテンプレート上でVueを実行する方法

モノリスアーキテクチャと呼ばれるシンプルな構造です。

同じサーバで動作しており、Vueとの連携にはLaravelのサポートが入るので複雑さは低減されます。

シンプルなので新しいアプリケーションを作るときに推奨される形ですが、事業が成長してアプリの規模が大きくなるとコード量が増加し依存が複雑になるため開発難易度が上がります。

２.VueとLaravelを別の環境（サーバー）にインストールし、LaravelをバックエンドのAPIサーバとして利用する方法

フロントエンド・バックエンド分離という構造です。

完全に別のサーバとして動作するので、VueとLaravel間の連携は全て自力で解決する必要があります。

事業が成長してアプリケーションの大きくなったとき、まずフロントエンドとバックエンドを分けることで複雑さを低減するために取り入れられます。

参考：Vue on Laravelというモノリスを解体してNuxtへ移行しました！

今回は１番の、Laravelの上にVueをインストールする方法を紹介します。

利用するバージョンについて

記事の記述にあたって利用した環境のバージョンは下記の通りでした。

php:8.2 Laravel:9.19 Node:18.13 vue:3.2

Laravelのサポート状況が下の図のようになっていたので、教科書で利用した６系から3世代進んで９系を利用します。

Laravelサポート状況

最新のLaravel9をインストール

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

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

インストールが完了したら、アプリケーションのディレクトリに移動しましょう

cd laravel_vue_app

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

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

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

composer require laravel/ui

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

php artisan ui vue

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

laravel/uiによって作られるpackage.jsonは、2023年1月24日ではこんな感じでした。

vueのバージョンは3になっており、viteで動いていることが分かります。

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "@vitejs/plugin-vue": "^4.0.0",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.3",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "sass": "^1.56.1",
        "vite": "^4.0.0",
        "vue": "^3.2.37"
    }
}

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

npm install

viteを実行

インストールが完了したらviteを実行して下さい。

npm run dev

Laravelの実行

さらにLaravelも実行して、動作を確認します。

php artisan serve

Laravel9

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

welcome.blade.phpからVueを呼び出せるように、appのid属性と、js/app.jsの読み込みを追加します。

ここで@viteディレクトブを利用することで、app.jsファイルやapp.cssファイルを読み込むことができます。

resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel Vite Vue</title>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

App.vueを追加する

必須では無いのですが、分かりやすさ重視のためにApp.vueを作ります。

resources/js/App.vue

<template>
    <h1>Hello World</h1>
</template>
<script>
export default {
    name: 'App'
}
</script>

このファイルをapp.jsから呼び出せるように修正します。

resources/js/app.js

import './bootstrap';
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.mount("#app");

HelloWorld

注意点として、php artisan serveコマンドでLaravel側のサーバーを動かす際には、別のターミナルの窓を用いて、npm run serveコマンドでVueも起動して下さい。

Vueを起動しない場合、下のような画面になります。

Vueを起動していないとき