Laravel: Vue.js

Vuejs.org เป็นตัวเลือกหนึ่งที่ laravel ได้เตรียมเอาไว้ ให้ใน Using Vue / React หรือจะติดตั้งเอง ในภายหลังก็ได้ เพราะว่า ผมมีบางหน้าที่ใช้ JQuery อยู่คู่ไปด้วย

1. ติดตั้งโดย command
   npm install vue@next
   แต่ใน mac os จะขึ้น error
   (node:24748) ExperimentalWarning: CommonJS module
   แก้โดยใช้
   npm install vue
2. ติดตั้ง @vitejs/plugin-vue โดย command
   npm install -D @vitejs/plugin-vue
3. เปิดไฟล์ SourceCode/vite.config.js
4. แก้ไขตามรูปแบบ

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   import vue from '@vitejs/plugin-vue'; 
   
   export default defineConfig({
       plugins: [
           laravel({
               input: [
                   'resources/css/app.css',
                   'resources/js/app.ts'
               ],
               refresh: true,
           }),
           vue({
               template: {
                   transformAssetUrls: {
                       base: null,
                       includeAbsolute: false,
                   },
               },
           }),
       ],
   });
   

5. เปลี่ยนเป็น TypeScript โดย command
   npm update vue-tsc
6. ติดตั้ง Laravel Breeze (หากยังไม่ได้ติดตั้ง)
   composer require laravel/breeze --dev
7. ติดตั้ง Breeze พร้อม Vue.js
php artisan breeze:install vue
8. ติดตั้ง dependencies
npm install
9. Compile assets
npm run dev
10. เปิด resources/js/Components จะเห็น Components สำเร็จรูป เช่น Dropdown.vue