ネットで調べた方法だと惜しいところまで行って動かなかったのでメモ
動作済みのコードを置いたレポジトリはこちら
https://github.com/YumaInaura/lavavel9-vue-example
Create project
プロジェクトを作成する
composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-vue-axample
cd laravel9-vue-axample
npm install
npm install
npm install vue@next vue-loader@next
npm i @vitejs/plugin-vue --save-dev
Edit vite.config.js
plugin に vue を追加する
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});
Edit resouces/js/app.js
vue を読み込む
import './bootstrap';
import '../css/app.css';
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")
Create resources/js/App.vue
Vueファイルを作る
ここでは動作確認用にカウンタ処理を書いておく
<template>
<div class="page">
<p>{{ counter }}</p>
<button @click="counter += 1">
click!
</button>
</div>
</template>
<script>
export default {
data () {
return {
counter: 0,
}
},
}
</script>
Edit resources/views/welcome.blade.php
ウェルカムページをVue用に編集する
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>
Serve
コンソールので別タブでそれぞれ vite / laravel を起動する
npm run dev
php artisan serve
Access on browser
http://127.0.0.1:8000/ にアクセスする
画面例
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。