はじめに
今回は、LaravelプロジェクトにVue3を導入する手順を解説しました。
私もそうですが、今までフロントエンドはjQueryを利用してきた方は多いのではないでしょうか。
と、色々ありますが細かいことは気にせず、是非試してみましょう。
Laravel Mixを使った構築手順は以下をご覧ください。
Laravel Sailでの開発環境の構築方法は以下をご覧ください。
他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。
【紹介】個人開発
私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。
また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます。
Vue3の導入
Vue.js v3.0は2020年9月に正式にリリースされました。
詳しい使い方などは、公式サイトを確認しましょう。
Laravelプロジェクトを構築した状態で、解説していきます。
カレントディレクトリをプロジェクトフォルダにし、以下のコマンドで、ViteのプラグインのVue3をインストールしましょう。
$ sail npm i @vitejs/plugin-vuepackage.jsonにvueが追加されました。
{
..
"dependencies": {
"@vitejs/plugin-vue": "^3.1.2",
}
}
vite.config.jsを開き、以下のように修正します。
（importとvue()を追加します）
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
server: {
hmr: {
host: 'localhost',
},
},
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
vue(),
],
});
npmでビルドを行います。開発時なのでdevを指定しました。
$ sail npm run dev本番用にJS/CSSを出力する場合は、以下のコマンドを実行します。
$ sail npm run buildViteについては以下の記事にもまとめました。
サンプルコード
それでは簡単なサンプルコードを書いてみましょう。
Laravelのテンプレートファイルを作成します。
resources\views\vue.blade.php
<html>
<head>
@vite(['resources/js/app.js'])
</head>
<body>
<div id="counter">
カウントアップ: @{{ counter }}
</div>
</body>
</html>次に、以下のファイルを修正します。
resources\js\app.js
以下のようなコードを記述しました。
カウンターを定義し、1秒ごとにカウントアップして数値を表示します。
import { createApp } from 'vue/dist/vue.esm-bundler';
const Counter = {
data() {
return {
counter: 0,
};
},
mounted() {
setInterval(() => {
this.counter++;
}, 1000);
},
};
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を試してみましょう。
カウンターの処理を行う関数を用意します。
書き方が先程と違い、戸惑うかも知れませんが、動作は同じになります。
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を以下のように修正します。（先程追加したサンプルコードは消してください）
import vueCounter from "./vueCounter";
import { createApp } from 'vue/dist/vue.esm-bundler';
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について解説している記事がありますのでご覧ください。
コメント