Laravel9でVite＋Vue3環境構築
Laravel9には初めからViteが入っているらしくVue3.jsの環境を作ってみました。
前提としてOSはMacOS、PHP、Node.jsはインストール済みです。
プロジェクト作成
まずLaravelの新規プロジェクトを作ります。
$composer create-project --prefer-dist laravel/laravel:^9.0 laravel-vite
$cd laravel-vite
$php artisan -V
Laravel Framework 9.24.0
Vue.jsインストール
Vue.jsとViteのインストール、設定を行います。
$npm install
$npm install vue@next vue-loader@next
$npm i @vitejs/plugin-vue --save-dev
ファイルの編集
まずvite.config.jsをエディタで開き以下のように修正します。
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
],
});
次にresouces/js/app.jsを以下のように編集します。
import './bootstrap';
import '../css/app.css';
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")
次にpublic/js下にApp.vueファイルを作ります。
<template>
Hello World
</template>
resources/views下にapp.blade.phpファイルを作ります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Viteのテスト</title>
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>
routes/web.phpを変更します。
Route::get('/', function () {
return view('app');
});
サーバ起動
まずviteを起動します。
npm run dev
別のターミナルでLaravelサーバを起動します。
$php artisan serve
INFO Server running on [http://127.0.0.1:8000].
ブラウザでhttp://127.0.0.1:8000が表示し、Hello Worldが表示されることを確認します。
参考サイト
https://readouble.com/laravel/9.x/ja/vite.html
https://techvblogs.com/blog/how-to-install-vue-3-in-laravel-9-with-vite