Laravel8のデフォルトのVue.jsのバージョンは2です、Laravel8でVue 3を利用するためにはVue3を利用するための設定が必要となります。

Laravel8の公式ドキュメントには記述されていない内容ですが、Vue 2に関連するパッケージをVue 3用に置き換え、app.jsファイルでVue 3用の初期設定を行うことでLaravel8でもVue 3を利用することは可能です。

Laravel8のインストール

laravelコマンドを利用してLaravel8のインストールを行います。


% laravel new laravel8_vue3_install

インストール完了後、インストールディレクトリに移動してlaravel/uiパッケージのインストールを行います。


 % composer require laravel/ui
Laravel8の公式ドキュメントでは新規でLaravel8をインストールする場合は、デフォルトではJetStreamによる新しい認証機能が利用されているのでlaravel/uiのインストールに関する記述はありません。laravel/uiをインストールしていますがlaravel/uiのインストールは必須ではありません。laravel/uiを利用することでapp.jsファイルのVue 2の設定内容の確認、ExampleComponent.vueファイルを利用することができます。

Vue.jsを利用するために以下のコマンドを実行します。実行後にはpackage.jsonファイルにvue.jsに関連するJavaScriptパッケージの情報が追加されます。


 % php artisan ui vue --auth

ここでnpm installコマンドを実行する前にpackage.jsonに記述されているVue 2に関連している下記のパッケージの情報を削除します。

  • “laravel-mix”: “^5.0.1”
  • “vue”: “^2.5.17”
  • “vue-template-compiler”: “^2.6.10”

Vue 3、Laravel-mix 6のインストール

laravel-mixはバージョン5ではなく6を利用します。バージョン6は、2020.11.8時点ではbeta版ですがバージョン6ではvue3に対応しています。

Vue 3とlaravel-mixのバージョン6を下記のコマンドでインストールします。


 % npm install -save-dev laravel-mix@next vue@next

インストールが完了するとlaravel-mixのbeta版とVue 3がインストールされていることを確認することができます。


{
   //略
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^6.0.0-beta.14", //Laravel-mix Version6
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^3.0.2" //Vue.js Version3
    }
}

webpack.mix.jsファイルを開いてVue 3に対応できるようにvue()を追加します。


mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css').vue();

webpack.mix.jsファイルの設定後npm install && npm run devコマンドを実行してください。


% npm install && npm run dev
//略
 	Okay, done. The following packages have been installed and saved to your package.json dependencies list:
 
 	- postcss@^8.1
 
 	Finished. Please run Mix again.

実行するとpostcss@^8.1のインストールが求めらpackage.jsonファイルにpostcssの情報が追加されるので再度npm run devを実行してください。


% npm run dev
//略
 	Okay, done. The following packages have been installed and saved to your package.json dependencies list:
 
 	- @vue/compiler-sfc
 
 	- vue-loader@^16.0.0-beta.9
 
 	Finished. Please run Mix again.

実行すると今後は、@vue/compiler-sfcとvue-loader@^16.0.0-beta.9の情報がpackage.jsonに追加されるので、


% npm run dev
//略
 	Okay, done. The following packages have been installed and saved to your package.json dependencies list:
 
 	- @vue/compiler-sfc
 
 	- vue-loader@^16.0.0-beta.9
 
 	Finished. Please run Mix again.

再度実行するとコンパイルは完了して以下のメッセージが表示されます。


% npm run dev
//略
✔ Compiled Successfully in 3966ms
┌───────────────────────────────────┬──────────┐
│ File                              │ Size     │
├───────────────────────────────────┼──────────┤
│ /js/app.js                        │ 2.16 MiB │
├───────────────────────────────────┼──────────┤
│ css/app.css                       │ 178 KiB  │
└───────────────────────────────────┴──────────┘

コンパイルが正常に完了した時のpackage.jsonファイルの中身は下記の通りです。


{
//略
    },
    "devDependencies": {
        "@vue/compiler-sfc": "^3.0.2",
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^6.0.0-beta.14",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "postcss": "^8.1.6",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^3.0.2",
        "vue-loader": "^16.0.0-rc.1"
    }
}

php artisan serveコマンドを実行してインストールしたLaravelが動作していることを確認します。larave/uiをインストールしているのでLoginとRegisterのリンクも右上に表示されます。

Laravel8初期画面
Laravel8初期画面

Vue 3の動作確認

resources¥js¥app.jsファイルを開いてVueの記述を下記のように変更します。すでに記述されているVue 2の設定を置き換えてください。

larave/uiパッケージをインストールした場合はapp.jsファイルにはVue 2での設定が記述されています。

require('./bootstrap');

import { createApp } from 'vue'
import ExampleComponent from './components/ExampleComponent.vue'

createApp({
    components:{
        ExampleComponent
    }
}).mount('#app')

設定したVue 3が正常に動作するのかwelcome.blade.phpファイルを利用して確認を行います。welcome.blade.phpファイルの中身はphp artisan serveで開発サーバを起動した時に最初に表示される画面です。

Vue.jsを利用するためにdiv要素にid=”app”を設定し、app.jsファイルで追加したExampleComponentコンポーネントを設定します。welcome.blade.phpファイルのLaravelロゴのSVGのタグの下にある50行目付近のdiv要素にid=”app”を追加してください。新たに別の場所にdiv要素を追加しても構いません。


<div id="app" class="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
    <example-component></example-component>
    <div class="grid grid-cols-1 md:grid-cols-2">                  

bodyの閉じタグの前にscriptタグを使ってjs/app.jsを読み込んでください。


    </div>
    <script src="js/app.js"></script>
</body>                  

追加作業が完了したら、npm run watchコマンドを実行してコンパイルが正常に動作することを確認してください。


 % npm run watch                 

再度ブラウザでLaravelにアクセスするとLaravelロゴの下にExampleComponentコンポーネントの中身が表示されれば設定は正常に行われています。

ExampleComponentの中身が表示される
ExampleComponentの中身が表示される

Composition APIで動作確認

Vue 3の Composition APIのrefを利用して設定した変数が表示されるか確認を行います。


<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div>{{ message }}</div>
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { ref } from "vue";
    export default {
        setup() {
            const message = ref("Hello Laravel Vue 3");

            return {
              message
            };
        },

        mounted() {
            console.log('Component mounted.')
        }
    }
</script>             

Exmple Componentの文字列の上にHello Laravel Vue 3が表示されていることを確認してください。表示されればComposition APIも正常に動作することがわかります。

Hello Laravel Vue3の表示
Hello Laravel Vue3の表示

以上で設定と動作確認は完了です。

laravel/uiを利用する必要しない場合は、本文書で出てきたpackage.json、app.js、ExampleComponent.vueを参考にすることでVue 3を利用することができます。