Breeze Starter Kids SPA Vue3 Integrate with Laravel9 ใน 5 นาที

Sharing is caring!

จากบทความเรื่อง “สร้างเว็บด้วย Laravel 9 + Vue 3 + Inertiajs + bootstrap5 ทำงานได้ดีเยี่ยม” ที่แนะนำวิธีการตั้งค่าให้ Laravel ใช้งานร่วมกับ Vue3 แบบ SPA พอดีไปเจอวิธีการตั้งค่าได้เร็ว เร็วมากจริง ๆ พร้อมทั้งยังทำ ระบบ Login, Register ให้แล้วด้วย เหมาะมาก ๆ ที่จะเอาไปทำเป็น POC โปรเจคแบบรวดเร็ว มาเริ่มกันเลย…

Install Laravel ยังเหมือนเดิม เพิ่มเติมติดตั้ง Breeze เข้ามา

ติดตั้ง laravel

แบบตามที่ guideline document แนะนำการติดตั้งของ laravel จะทำได้ด้วยกัน 2 วิธี

1. composer: composer create-project laravel/laravel example-app
2. laravel cli:
   • composer global require laravel/installer:^5.4
   • laravel new example-app

เข้าไปในโปรเจค และ start serve

$ cd example-app
$ php artisan serve

ติดตั้ง breeze package

ติดตั้ง breeze package ด้วย

php artisan breeze:install

เลือก

• 0 blade template
• 1 react framework
• 2 vue framework
• 3 api

รอสักครู่นะ

ติดตั้งเสร็จ

build javascript code
$ npm install
$ npm run dev

$ php artisan serve

http://127.0.0.1:8000/login

http://127.0.0.1:8000/register

สรุปท้ายบทความ

จากขั้นตอนของบทความที่ผมได้ลงไปก่อนหน้านี้กับวิธีการตั้งค่าต่าง ๆ ให้ laravel เดิมของเราที่เป็น Laravel + Blade template เดิมอยู่ให้มาทำงานร่วมกับ Vue3 ได้นั้น มีขั้นตอนที่ค่อนข้าง ยุ่งยาก แต่วิธีการ breeze มันง่าย มาก ๆ ลองไปทำดูนะครับ