หมวดหมู่: 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