Laravel8でVue 3を使う
Laravel8のデフォルトのVue.jsのバージョンは2です、Laravel8でVue 3を利用するためにはVue3を利用するための設定が必要となります。
Laravel8の公式ドキュメントには記述されていない内容ですが、Vue 2に関連するパッケージをVue 3用に置き換え、app.jsファイルでVue 3用の初期設定を行うことでLaravel8でもVue 3を利用することは可能です。
Laravel8に対応しているlaravel/uiのバージョン3ををインストールすることで一度Vue.js2が動作する環境を作り、その後Vue.js 2をVue.js 3に置き換える処理をしています。laravel/uiが必須ということではありません。本文書で更新を行うファイルを使うことでlaravel/uiなしでVue.js 3を利用することは可能です。
Laravel8のインストール
laravelコマンドを利用してLaravel8のインストールを行います。最終動作確認のLaravelのバージョンは8.28.1です。
% laravel new laravel8_vue3_install
インストール完了後、インストールディレクトリに移動してlaravel/uiパッケージのインストールを行います。laravel/uiのバージョンはLaravel8に対応しているバージョンv3がインストールされます。
% composer require laravel/ui
Vue.jsを利用するために以下のコマンドを実行します。実行後にはpackage.jsonファイルにvue.jsに関連するJavaScriptパッケージの情報が追加されます。
% php artisan ui vue --auth
ここでnpm installコマンドを実行する前にpackage.jsonに記述されているVue 2に関連している下記のパッケージの情報を削除します。
- “laravel-mix”: “^6.0.6”,
- “vue”: “^2.5.17”
- “vue-template-compiler”: “^2.6.10”
Vue 3、Laravel-mix 6のインストール
laravel-mixはバージョン5ではなく6を利用します。執筆当時はバージョン6はbeta版でしたが現在は正式版になっています。
Vue 3とlaravel-mixのバージョン6を下記のコマンドでインストールします。
% npm install -save-dev laravel-mix@next vue@next
Laravel-mixのバージョン6がインストール済の場合はvue3のみのインストールになります。
% npm install -save-dev 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.6",
"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.5", //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コマンドを実行してください。
現在のLaravel8ではpostcssのバージョン8がインストール済であるためpostcss@8.1の対応はありません。Laravel8のバージョンによっては以下の対応が必要となります。
実行するとpostcss@^8.1のインストールが求めらpackage.jsonファイルにpostcssの情報が追加されるので再度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.
npm run dev実行後に@vue/compiler-sfcとvue-loader@^16.1.2の情報がpackage.jsonに追加されるので、再度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.1.2
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.5",
"axios": "^0.21",
"bootstrap": "^4.0.0",
"jquery": "^3.2",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"postcss": "^8.1.14",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^3.0.5",
"vue-loader": "^16.1.2",
"vue-template-compiler": "^2.6.10"
}
}
php artisan serveコマンドを実行してインストールしたLaravelが動作していることを確認します。larave/uiをインストールしているのでLoginとRegisterのリンクも右上に表示されます。
Vue 3の動作確認
resources¥js¥app.jsファイルを開いてVueの記述を下記のように変更します。すでに記述されている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コンポーネントの中身が表示されれば設定は正常に行われています。
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も正常に動作することがわかります。
以上で設定と動作確認は完了です。
laravel/uiを利用する必要がない場合は、本文書で出てきたpackage.json、app.js、ExampleComponent.vueを参考にすることでlarave/uiをインストールしない環境でもLaravel8でVue 3を利用することができます。
