ใช้งาน Vue 3 & Vite บน Laravel 11
Laravel 11+ by Keptcode.com
Repo: Github.com (รบกวนกด Start ให้ด้วยนะคับ)
ติดตั้ง Vue และ Package ต่าง ๆ
Path: [skeleton]
Language: Terminal
$ npm install --save-dev vue vue-loader @vitejs/plugin-vue
ตั้งค่า Vite เรียกใช้งาน Vue เป็น Frontend แทน
Path: [skeleton]\vite.config.js
Language: Javascript
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'; // <=== เพิ่มคำสั่งนี้ (1/2)
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
// เริ่มต้น (2/2)
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
// สิ้นสุด (2/2)
],
});
ไฟล์: vite.config.js
ใช้งาน Vue บน Laravel ผ่าน Vite
Path: [skeleton]\resources\js\App.vue
Language: Vue
<template>
<div class="app">
<h1>Hello Vue.js</h1>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style></style>
ไฟล์: App.vue
ตั้งค่า Laravel เรียกใช้ Vue ผ่าน Vite
Path: [skeleton]\resources\js\app.js
Language: Javascript
import './bootstrap';
// #1 เรียกใช้งาน Vue ปล. ต้องตืดตั้ง vue ผ่าน npm ก่อน
import { createApp } from 'vue'
// #2 นำเข้าไฟล์โปรเจก Vue.js
import App from './App.vue'
// #3 สร้างเว็บด้วย Vue
createApp(App).mount("#app")
ไฟล์: app.js
สร้าง View สำหรับ Render Vue (โดยเฉพาะ)
Path: [skeleton]\resources\views\vue.blade.php
Language: Php
<!doctype html>
<html lang="en">
<head>
<base href="./">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="description" content="">
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>
Github: vue.blade.php
เพิ่ม Route เส้นใหม่
Path: [skeleton]\routes\web.php
Language: PHP
// GET: http://127.0.0.1:8000/vue
Route::get('/vue', function () {
return view('vue');
});
ไฟล์: web.php
รันคำสั่ง Laravel
Path: [skeleton]
Language: Terminal
# รัน Laravel
$ php artisan serve
## Output (Last Updated: 2024-08-24 09:35) ##
# INFO Server running on [http://127.0.0.1:8000].
# Press Ctrl+C to stop the server
และ: รันคำสั่ง Vite พร้อม ๆ กัน
Path: [skeleton]
Language: Terminal
# รัน Vite
$ npm run dev
## Output (Last Updated: 2024-08-24 09:35) ##
# VITE v5.4.2 ready in 396 ms
# ➜ Local: http://localhost:5173/
# ➜ Network: use --host to expose
# ➜ press h + enter to show help
# LARAVEL v11.21.0 plugin v1.0.5
