Laravel9でVue3またはReactを使いたい場合の設定

Inertia.jsやJetStream、Laravel UIなどを利用することなくLaravel9でVue3、Reactを使いたい場合の設定方法について説明しています。設定完了後VueまたはReactのコンポーネントに記述した”Hello World”がブラウザ上に表示されます。

Vue3を利用したい場合

laravelコマンドを利用してLaravelプロジェクトの作成を行います。プロジェクト名はlaravel9_vue3に設定していますが名前は任意です。


% laravel new laravel9_vue3

composerコマンドでもLaravelプロジェクトの作成は可能です。


% composer create-project --prefer-dist laravel/laravel laravel9_vue3

Laravelプロジェクトの作成が完了したらlaravel9_vue3フォルダに移動してvueのインストールを行います。


 % npm install vue --save-dev

package.jsonファイルを確認するとVue 3がインストールされていることが確認できます。


{
//略
    "devDependencies": {
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue": "^3.2.30"
    }
}

resources¥js¥app.jsファイルでVue3の設定を行います。


require("./bootstrap");
import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

jsフォルダにcomponentsフォルダを作成しその下にApp.vueファイルを作成します。


<template>
    <h1>Hello World Vue</h1>
</template>

resources¥viewsフォルダにあるwelcome.blade.phpファイルを下記のように変更します。id=”app”を設定したdiv要素にapp.jsファイルで設定したAppコンポーネントの内容が表示されます。


<!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</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>

        <!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

インストールしたVueを利用するためにLaravel mixの設定ファイルであるwebpack.mix.jsファイルにvue()を追加します。Laravel mixはwebpackを利用しています。


mix.js("resources/js/app.js", "public/js")
    .vue()
    .postCss("resources/css/app.css", "public/css", [
        //
    ]);

npm run watchコマンドを実行してビルドを行います。実行するとvue-loaderのインストールが必須というメッセージが表示されるのでvue-loaderのインストールを行います。vue-loaderはSingle File Component(SFC)で作成したVueファイルをJavaScriptのコードに変換するために必要となるwebpack用のローダーです。


 % npm run watch

> watch
> mix watch

        Additional dependencies must be installed. This will only take a moment.
 
        Running: npm install vue-loader@^16.2.0 --save-dev --legacy-peer-deps
 
        Finished. Please run Mix again.

表示されているバージョンのvue-loaderをインストールします。


 % npm install vue-loader@^16.2.0 --save-dev

インストールが完了すると依存関係の問題は解消してビルドに成功します。

最後に開発サーバを起動するためにphp artisan serveコマンドを実行します。実行するとAppコンポーネントに記述したHello Worldが表示されます。Laravel9の環境でVue3が利用できるようになりました。

Reactを利用したい場合

laravelコマンドを利用してLaravelプロジェクトの作成を行います。プロジェクト名はlaravel9_reactに設定していますが名前は任意です。


% laravel new laravel9_react

composerコマンドでもLaravelプロジェクトの作成は可能です。


% composer create-project --prefer-dist laravel/laravel laravel9_react

Laravelプロジェクトの作成が完了したらlaravel9_reactフォルダに移動してreact, react-domのインストールを行います。


 % npm instal react react-dom --save-dev

package.jsonファイルを確認するとreact, react-domがインストールされていることが確認できます。


{
　　　　　　//略
    "devDependencies": {
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    }
}

resources¥js¥app.jsファイルでcomponentsフォルダ作成するApp.jsファイルを読み込みます。


require("./bootstrap");
require("./components/App");

jsフォルダにcompoonetsフォルダを作成しApp.jsファイルを作成して下記を記述します。


import ReactDOM from "react-dom";

function App() {
    return <h1>Hello World React</h1>;
}

export default App;

if (document.getElementById("app")) {
    ReactDOM.render(<App />, document.getElementById("app"));
}

resources¥viewsフォルダにあるwelcome.blade.phpファイルを下記のように変更します。id=”app”を設定したdiv要素にApp.jsファイルで設定したAppコンポーネントの内容が表示されます。


<!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</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>

        <!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

インストールしたReactを利用するためにLaravel mixの設定ファイルであるwebpack.mix.jsファイルにreact()を追加します。


mix.js("resources/js/app.js", "public/js")
    .react()
    .postCss("resources/css/app.css", "public/css", [
        //
    ]);

npm run watchコマンドを実行してビルドを行います。実行するとbabel/preset-reactのインストールが不足しているのでbabel/preset-reactのインストールを行います。


 % npm run watch

> watch
> mix watch

        Additional dependencies must be installed. This will only take a moment.
 
        Running: npm install @babel/preset-react --save-dev --legacy-peer-deps
 
        Finished. Please run Mix again.

表示されているbabel/preset-reactをインストールします。


 % npm install @babel/preset-react --save-dev

インストールが完了するとnpm run devコマンドでのエラーメッセージが解消されます。

最後に開発サーバを起動するためにphp artisan serveコマンドを実行します。実行するとAppコンポーネントに記述したHello Worldが表示されます。Laravel9の環境でReactが利用できるようになりました。