みなさん、こんにちは！
今回はLaravelにVue.jsを導入する方法をハンズオンで解説していきます！
「LaravelにVue.jsを導入したいけど、どうやってやるの…？」
「LaravelにVue.jsを導入する方法を忘れてしまった！」
こんな方には参考になる内容になっているかと思います。
Vue.jsの導入方法
Laravelには標準で「Vite」というフロントエンドのビルドツールが入っているので、こちらを使ってVue.jsを導入していきます。
まず、「vitejs/plugin-vue」というViteの公式プラグインをインストールしていきます。
npm install @vitejs/plugin-vuevitejs/plugin-vueをより深く知りたい方は下記を除いてみてください。
次に、vite.config.jsを開き、Vueの設定を行います。
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';
import vue from '@vitejs/plugin-vue'; // 追加
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
tailwindcss(),
vue(), // 追加
],
});resources/js/App.vueを作成します。
<script setup>
</script>
<template>
<h1>トップページ</h1>
</template>resources/js/bootstrap.jsを編集していきます。
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');bootstrap.jsはフロントエンドのリソースをビルドする際に最初に読み込まれます。
コードの意味としては、IDが「app」と指定されている要素にVueインスタンスをマウント（紐付け）する、というような意味になります。
そのため、「app」という名前でIDを付与した要素を作っておく必要があります。
welcome.blade.phpを下記のように編集していきましょう。
<!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>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div id="app"></div>
</body>
</html>@vite(['resources/css/app.css', 'resources/js/app.js'])がポイントで、Viteを使うときはこのようにCSSとJavaScriptを読み込みます。
最後に、動作を確認していきます。
npm run devターミナルの別タブでLaravel組み込みのWebサーバーも起動します。
php artisan serve以下のように表示できたら成功です。
トラブルシューティング
「vitejs/plugin-vue」をインストールする際、下記のようにインストールしていました。
npm install @vitejs/plugin-vueこの場合、「vitejs/plugin-vue」の最新版をインストールすることになります。
もしかしたらバージョンの問題でエラーが発生することがあるかもしれません。
その場合は、エラーメッセージをよく読みつつ、下記のようにバージョン指定してダウングレードすることをおすすめします。
# バージョン指定でインストール
npm uninstall @vitejs/plugin-vue
npm install @vitejs/plugin-vue@4.0.0それでは、今回は以上です！
コメント