はじめに
今回は、LaravelプロジェクトにVue3を導入する手順を解説しました。
私もそうですが、今までフロントエンドはjQueryを利用してきた方は多いのではないでしょうか。
と、色々ありますが細かいことは気にせず、是非試してみましょう。
Viteを使った構築手順は以下をご覧ください。
Laravel Sailでの開発環境の構築方法は以下をご覧ください。
他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。
【紹介】個人開発
私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。
また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます。
Vue3の導入
Vue.js v3.0は2020年9月に正式にリリースされました。
詳しい使い方などは、公式サイトを確認しましょう。
Laravelプロジェクトを構築した状態で、解説していきます。
カレントディレクトリをプロジェクトフォルダにし、以下のコマンドで、最新安定版のVue3をインストールしましょう。
$ sail npm install vue@nextpackage.jsonにvueが追加されました。
{
..
"dependencies": {
"vue": "^3.2.31"
}
}
webpack.mix.jsを開き、以下のように修正します。
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
])
// 追加
.vue();npmでビルドを行います。開発時なのでdevを指定しました。
$ sail npm run dev以下のようなメッセージが表示され、vue-loaderのインストールが行われました。
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.package.jsonにvue-loaderが追加されました。
...
"devDependencies": {
...
"vue-loader": "^16.8.3"
},
"dependencies": {
"vue": "^3.2.21"
}
}もう一度ビルドを行いましょう。
$ sail npm run devビルドに成功し、app.jsやapp.cssが無事に作成されました。
✔ Compiled Successfully in 1562ms
┌────────────────────┬─────────┐
│ File │ Size │
├────────────────────┼─────────┤
│ /js/app.js │ 606 KiB │
│ css/app.css │ 1 bytes │
└────────────────────┴─────────┘
webpack compiled successfullyサンプルコード
それでは簡単なサンプルコードを書いてみましょう。
Laravelのテンプレートファイルを作成します。
resources\views\vue.blade.php
<html>
<body>
<div id="counter">
カウントアップ: @{{ counter }}
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
以下のJavaScriptファイルを修正します。
resources\js\bootstrap.js
一行追加しましょう。これでVueが使用できるようになりました。
window.Vue = require("vue");次に、以下のファイルを修正します。
resources\js\app.js
以下のようなコードを記述しました。
カウンターを定義し、1秒ごとにカウントアップして数値を表示します。
require("./bootstrap");
const Counter = {
data() {
return {
counter: 0,
};
},
mounted() {
setInterval(() => {
this.counter++;
}, 1000);
},
};
Vue.createApp(Counter).mount("#counter");最後にLaravelのルーティングを定義しましょう。
routes\web.php
以下を追加します。
Route::get('/vue', function () {
return view('vue');
});npmでビルドを行います。開発時なのでdevを指定しました。
$ sail npm run dev以下のURLにアクセスします。
http://localhost/vue画面が表示され、自動的にカウントアップされる数値が表示されました。
Composition APIで実装
折角ですので、Vue3の目玉機能である、Composition APIを試してみましょう。
bootstrap.jsに追記した以下の行はコメントアウトします。
//window.Vue = require("vue");カウンターの処理を行う関数を用意します。
書き方が先程と違い、戸惑うかも知れませんが、動作は同じになります。
resources\js\vueCounter.js
import { ref, onMounted } from "vue";
export default function vueCounter() {
// リアクティブな参照
let counter = ref(0);
onMounted(() => {
setInterval(() => {
// valueを更新。画面も更新される
counter.value++;
}, 1000);
});
return {
counter,
};
}次に、app.jsを以下のように修正します。（先程追加したサンプルコードは消してください）
require("./bootstrap");
import vueCounter from "./vueCounter";
import { createApp } from "vue";
createApp({
setup() {
// カウンターを更新する
const { counter } = vueCounter();
return {
counter,
};
},
}).mount("#counter");npmでビルドを行います。開発時なのでdevを指定しました。
$ sail npm run devこの状態で、先程と同じ画面を開くと、カウントアップされた画面が表示されます。
Composition APIについてさらに詳しく知りたい場合は、以下の記事を参考にしてください。
その他
初学者へ
Laravelを初めて触る方へ向け、手順やアドバイスをまとめました。
外部サーバーへ公開
作成したアプリは公開して使ってもらいましょう！
Laravelアプリケーションを外部公開する方法をまとめました。
脆弱性対策
脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。
GitHubと連携
GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。
GitHub Copilot
GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。
さいごに
今回は、LaravelプロジェクトでVue3を使用できるように解説しました。
是非、試してみてください。
他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。
コメント