みなさん、こんにちは！
今回はLaravelにVue.jsを導入する方法をハンズオンで解説していきます！
「LaravelにVue.jsを導入したいけど、どうやってやるの…？」
「LaravelにVue.jsを導入する方法を忘れてしまった！」
こんな方には参考になる内容になっているかと思います。
Vue.jsの導入方法
Laravelには標準で「Vite」というフロントエンドのビルドツールが入っているので、こちらを使ってVue.jsを導入していきます。
まず、「vitejs/plugin-vue」というViteの公式プラグインをインストールしていきます。
$ npm install @vitejs/plugin-vue
vitejs/plugin-vueをより深く知りたい方は下記を除いてみてください。
https://github.com/vitejs/vite-plugin-vue/tree/main/packages/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を下記のように編集していきましょう。
<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
それでは、今回は以上です！
コメントを投稿