Basic Vue and Nuxt 3 with Prisma and Supabase

Section 1: Basic Vue 3 Composition API

• แนะนำ Vue 3
• ตั้งค่าและเริ่มต้นโปรเจกต์
• Composition API ใน Vue 3 เทียบกับ Options API
• สร้าง Component ที่ใช้ Composition API และสามารถนำกลับมาใช้ซ้ำได้
• การสร้าง Component ที่สามารถปรับตัวได้ (reactive components)

Section 2: What is Nuxt?

• ภาพรวมของ Nuxt.js และสถาปัตยกรรมของมัน
• ความแตกต่างระหว่าง Nuxt 2 และ Nuxt 3
• ประโยชน์ของการใช้ Nuxt ในการพัฒนาเว็บแอปพลิเคชัน
• การตั้งค่าโปรเจกต์ Nuxt 3

Section 3: File based routing

• การกำหนดเส้นทางโดยใช้ไฟล์ (file-based routing) คืออะไร
• สร้างเส้นทางใน Nuxt
• การสร้างเส้นทางแบบไดนามิกและแบบซ้อน (Nested)
• การเปลี่ยนเส้นทางและการใช้งาน navigation guards

Section 4: Auto imports

• การนำเข้าอัตโนมัติ (auto imports) ใน Nuxt 3
• ประโยชน์ของการใช้ auto imports
• การปรับแต่งการตั้งค่า auto import

Section 5: Middleware

• Middleware ใน Nuxt คืออะไร
• วิธีการสร้างและใช้งาน Middleware
• ความแตกต่างระหว่าง Middleware แบบ Global และ Local
• ตัวอย่าง Middleware สำหรับการตรวจสอบสิทธิ์ (authentication)

Section 6: Layouts

• แนะนำ Layouts ใน Nuxt
• การกำหนด Layout เริ่มต้น
• Layout แบบซ้อน (Nested) และกรณีการใช้งาน
• การปรับแต่ง Layout ตามเส้นทาง

Section 7: Data fetching

• วิธีการดึงข้อมูลใน Nuxt
• การใช้ useFetch และ asyncData
• การดึงข้อมูลฝั่ง Client และฝั่ง Server
• การแคชและการปรับปรุงประสิทธิภาพการดึงข้อมูล

Section 8: Module Discovery and Use

• แนะนำโมดูลใน Nuxt
• สำรวจโมดูลที่นิยมใช้ใน Nuxt
• วิธีการติดตั้งและตั้งค่าโมดูลใน Nuxt
• การสร้างโมดูลแบบกำหนดเองใน Nuxt

Section 9: Server API routes

• แนะนำการสร้างเส้นทาง API ใน Nuxt 3
• วิธีการสร้างและจัดการเส้นทาง API ฝั่งเซิร์ฟเวอร์
• การใช้งาน query parameters และ body payload
• การจัดการการตรวจสอบสิทธิ์และการอนุญาต (authorization)

Section 10: Hybrid rendering

• การเรนเดอร์แบบไฮบริด (hybrid rendering) ใน Nuxt 3 คืออะไร
• ความเข้าใจเกี่ยวกับ Server-Side Rendering (SSR) และ Static Site Generation (SSG)
• ประโยชน์และกรณีการใช้งานของ hybrid rendering
• การตั้งค่า hybrid rendering ใน Nuxt 3

Section 11: Prisma and Supabase

• แนะนำ Prisma: ORM สำหรับการจัดการฐานข้อมูล
• การตั้งค่า Prisma ในโปรเจกต์ Nuxt
• แนะนำ Supabase: Backend as a Service
• การผนวกรวม Supabase กับ Nuxt และ Prisma

Section 12: Deployment

• เตรียมแอป Nuxt 3 สำหรับการใช้งานใน Production
• การ Deploy ไปยังแพลตฟอร์ม Cloud เช่น Vercel หรือ Netlify
• การปรับปรุงประสิทธิภาพสำหรับ Production
• การจัดการ environment variables และ secrets