พัฒนาเว็บไซต์ · WDC-103

Basic Vue and Nuxt with Prisma and Supabase

หลักสูตร Basic Vue and Nuxt with Prisma and Supabase เป็นการอบรมสร้างเว็บแอป Full Stack ด้วย Vue 3.5 และ Nuxt 4 ตั้งแต่ Component และ Routing จนถึง Server API ฐานข้อมูล Supabase ผ่าน Prisma และระบบ Login เหมาะกับนักพัฒนาเว็บและนักศึกษาที่มีพื้นฐาน JavaScript จบแล้ว Deploy เว็บร้านค้าขึ้น Cloud ได้

อัปเดตล่าสุด 9 ต.ค. 2569

ราคาเริ่มต้น 5,850 บาท / ท่าน 6,500 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา12 ชั่วโมง · 2 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

Vue เป็นเฟรมเวิร์กสร้างหน้าเว็บที่เรียนรู้ง่ายและยืดหยุ่น ส่วน Nuxt ต่อยอด Vue ให้เป็นแอป Full Stack ที่มีทั้ง Routing จากไฟล์ การ Render ฝั่ง Server และ API ในโปรเจกต์เดียว เมื่อใช้คู่กับ Prisma ที่ช่วยเขียนคำสั่งฐานข้อมูลแบบมี Type และ Supabase ที่ให้ฐานข้อมูล PostgreSQL พร้อมระบบสมาชิก ทีมเล็กก็สร้างเว็บแอปที่ใช้งานจริงได้อย่างรวดเร็ว

หลักสูตรนี้เริ่มจากพื้นฐาน Vue 3.5 แบบ script setup แล้วเข้าสู่ Nuxt 4 รุ่นปัจจุบัน ทั้งโครงสร้างโฟลเดอร์ app, Routing, Auto Import, Layout, Middleware และการดึงข้อมูล จากนั้นสร้าง Server API Route เลือกวิธี Render ด้วย Route Rules เชื่อมฐานข้อมูล Supabase ด้วย Prisma 7 ทำระบบ Login ด้วย Supabase Auth และปิดท้ายด้วยการ Deploy แอป Full Stack ขึ้น Cloud (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Beginner)

สิ่งที่คุณจะได้รับ

เขียน Component ด้วย Vue 3.5 แบบ script setup และแยก Logic เป็น Composable ได้
สร้างและจัดโครงสร้างโปรเจกต์ Nuxt 4 ได้
ใช้ File-based Routing, Layout และ Middleware ของ Nuxt ได้
ดึงข้อมูลด้วย useFetch, useAsyncData และ $fetch ได้ถูกที่
สร้าง Server API Route และเลือกวิธี Render ให้เหมาะกับแต่ละหน้าได้
เชื่อมฐานข้อมูล Supabase ด้วย Prisma 7 และทำระบบ Login ด้วย Supabase Auth ได้
Deploy แอป Nuxt แบบ Full Stack ขึ้น Cloud ได้

หลักสูตรนี้เหมาะสำหรับ

นักพัฒนาเว็บที่ต้องการเริ่มต้น Vue และ Nuxt สำหรับงาน Full Stack
Frontend Developer ที่ต้องการทำ Server API และฐานข้อมูลในโปรเจกต์เดียว
ผู้ที่ใช้ Nuxt 3 อยู่และต้องการย้ายมาใช้ Nuxt 4
นักศึกษาและนักไอทีที่มีพื้นฐาน JavaScript และสนใจการทำเว็บแอปสมัยใหม่

พื้นฐานของผู้เข้าอบรม

เขียน HTML และ CSS พื้นฐานได้
เขียน JavaScript พื้นฐานได้ ทั้งตัวแปร ฟังก์ชัน Array, Object และ async กับ await
เข้าใจการทำงานของเว็บแอปและ HTTP เบื้องต้น ไม่จำเป็นต้องมีประสบการณ์ลึก
โน้ตบุ๊กที่ติดตั้ง Node.js รุ่น LTS และ VS Code ได้

หัวข้อการฝึกอบรม

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Basic Vue and Nuxt 3 with Prisma and Supabase อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ระดับ Beginner เนื่องจาก Nuxt 3 สิ้นสุดการดูแลแล้ว ฉบับนี้จึงย้ายมาใช้ Nuxt 4 ที่วางโค้ดฝั่งแอปไว้ในโฟลเดอร์ app ใช้ Vue 3.5 แบบ script setup

เปลี่ยนการเชื่อมฐานข้อมูลเป็น Prisma ORM 7 ที่ใช้ prisma.config.ts และ Driver Adapter ใช้ API Key รูปแบบใหม่ของ Supabase และกำหนดวิธี Render ด้วย Route Rules โดยยังคงแกนเดิมคือ Routing, Auto Import, Middleware, Layout, Data Fetching, Module, Server API, Prisma, Supabase และการ Deploy ผู้เรียนใช้บัญชี Supabase, GitHub และ Vercel หรือ Netlify ของตนเองในแผนใช้ฟรี และได้ Lab Guide กับซอร์สโค้ดเว็บร้านค้า Full Stack กลับไปใช้งานต่อ

Day 1 Vue 3.5 และพื้นฐาน Nuxt 4

Section 1: Lab: Vue 3.5 ด้วย Composition API

เตรียม Node.js, VS Code และ Vue - Official Extension
script setup, ref, reactive และ computed
Template Syntax, v-if, v-for และ v-model
Lab: หน้ารายการสินค้าแบบ Reactive

Section 2: Lab: Component และ Composable

ส่งข้อมูลด้วย Props และ Emits แบบมี Type
defineModel สำหรับ Component ที่ผูกค่าสองทาง
แยก Logic ที่ใช้ซ้ำเป็น Composable
Lab: Component การ์ดสินค้าและตะกร้าที่ใช้ซ้ำได้

Section 3: รู้จัก Nuxt 4 และสร้างโปรเจกต์

Nuxt คืออะไร และต่างจาก Vue ที่ใช้ Vite อย่างไร
สร้างโปรเจกต์ด้วย npm create nuxt และใช้ Nuxt CLI
โครงสร้างโฟลเดอร์ app, server และ shared ของ Nuxt 4
สิ่งที่เปลี่ยนจาก Nuxt 3 และแนวทางย้ายโปรเจกต์เดิม

Section 4: Lab: File-based Routing และ Layout

สร้างหน้าในโฟลเดอร์ pages และ NuxtLink
เส้นทางแบบ Dynamic และแบบซ้อน (Nested)
Layout เริ่มต้นและการเลือก Layout ด้วย definePageMeta
Lab: เว็บร้านค้าที่มีหน้ารายการ หน้ารายละเอียด และเมนู

Section 5: Auto Import และ Route Middleware

Auto Import ของ Component, Composable และ Utility
ปรับแต่งและปิด Auto Import เมื่อจำเป็น
Middleware แบบ Global และแบบเฉพาะหน้า
Lab: Middleware ตรวจการเข้าหน้าสมาชิก

Section 6: Lab: การดึงข้อมูลใน Nuxt

useFetch, useAsyncData และ $fetch ต่างกันอย่างไร
ดึงข้อมูลตอน SSR โดยไม่ดึงซ้ำฝั่ง Client
สถานะ status, error และการ refresh ข้อมูล
Lab: แสดงสินค้าจาก API ภายนอกพร้อมสถานะโหลด

Day 2 Server, ฐานข้อมูล, Login และ Deploy

Section 7: Nuxt Module ที่ใช้บ่อย

ค้นหาและติดตั้ง Module ด้วย npx nuxt module add
ตั้งค่า Module ใน nuxt.config.ts
ตัวอย่าง Module สำหรับ UI, รูปภาพ และ SEO
Lab: เพิ่ม Module และปรับหน้าตาเว็บร้านค้า

Section 8: Lab: Server API Route

สร้าง API ในโฟลเดอร์ server/api ด้วย defineEventHandler
อ่าน Query, Route Param และ Body
ตรวจข้อมูลที่รับเข้าและส่ง Error ด้วย createError
Lab: API สินค้าที่หน้าเว็บเรียกใช้ได้

Section 9: Hybrid Rendering ด้วย Route Rules

SSR, SSG และการ Render ฝั่ง Client ต่างกันอย่างไร
กำหนดวิธี Render รายเส้นทางด้วย routeRules
Prerender, SWR, ISR และ Cache ของหน้าและ API
Lab: หน้าแรกแบบ Prerender และหน้าสินค้าแบบ SWR

Section 10: Lab: Prisma 7 กับ Supabase

สร้างโปรเจกต์ Supabase และเลือก Connection String
prisma.config.ts, schema.prisma และ Generator แบบ prisma-client
Migration และ Driver Adapter ของ PostgreSQL
Lab: CRUD สินค้าผ่าน Server API ที่ใช้ Prisma

Section 11: Lab: ระบบ Login ด้วย Supabase Auth

ติดตั้ง @nuxtjs/supabase และใช้ API Key แบบ Publishable
สมัครสมาชิกและ Login ด้วยอีเมล
ตรวจผู้ใช้ฝั่ง Server ด้วย serverSupabaseUser
Lab: หน้าจัดการสินค้าที่เข้าได้เฉพาะผู้ดูแล

Section 12: Workshop: Deploy แอป Full Stack

เตรียม Environment Variable และ runtimeConfig อย่างปลอดภัย
Build แอปและเลือก Preset ของ Nitro
Deploy ขึ้น Vercel หรือ Netlify ผ่าน GitHub
Workshop: เว็บร้านค้า Full Stack ที่ใช้งานได้จริงบน Cloud

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

คำถามที่พบบ่อย

Composition API กับ Options API ใน Vue 3 ต่างกันอย่างไร

Options API แบ่งโค้ดของ Component ตามประเภท เช่น data, methods และ computed ทำให้โค้ดของฟีเจอร์เดียวกระจายหลายส่วนเมื่อ Component ใหญ่ขึ้น ส่วน Composition API เขียนใน script setup และใช้ ref, reactive, computed และ watch จัดกลุ่มโค้ดตามฟีเจอร์ได้ แยก Logic ที่ใช้ซ้ำเป็น Composable และรองรับ TypeScript ได้ดีกว่า Nuxt 4 และหลักสูตรนี้ใช้ script setup เป็นหลัก แต่ Options API ยังใช้งานได้

useFetch กับ $fetch ใน Nuxt ต่างกันอย่างไร

useFetch เป็น Composable สำหรับดึงข้อมูลตอนแสดงหน้า ทำงานได้ทั้งฝั่ง Server และ Client โดยส่งผลที่ดึงตอน SSR ไปให้ฝั่ง Client ใช้ต่อ จึงไม่ดึงซ้ำสองรอบ และคืนค่า data, status และ error ให้ใช้ในเทมเพลต ใน Nuxt 4 ค่า data เป็น shallowRef เป็นค่าเริ่มต้น ส่วน $fetch เป็นฟังก์ชันส่งคำขอธรรมดา เหมาะกับงานที่เกิดจากผู้ใช้ เช่น กดส่งฟอร์ม ถ้าต้องการควบคุมการดึงข้อมูลเองมากขึ้นให้ใช้ useAsyncData

ใช้ Prisma กับ Supabase ในโปรเจกต์ Nuxt ตั้งค่าอย่างไร

สร้างโปรเจกต์ใน Supabase แล้วคัดลอก Connection String จากหน้า Connect มาใส่ในไฟล์ .env โดยใช้ Connection Pooler สำหรับแอป และการเชื่อมต่อแบบ Session หรือ Direct สำหรับ Migration ใน Prisma ORM 7 ให้กำหนดค่าในไฟล์ prisma.config.ts ใช้ Generator แบบ prisma-client และสร้าง PrismaClient พร้อม Driver Adapter ของ PostgreSQL จากนั้นรัน Migration และเรียกใช้ PrismaClient เฉพาะในไฟล์ใต้ server เท่านั้น เพื่อไม่ให้ข้อมูลเชื่อมต่อฐานข้อมูลหลุดไปฝั่ง Client

Nuxt 4 ต่างจาก Nuxt 3 อย่างไร ควรย้ายไหม

Nuxt 3 สิ้นสุดการดูแลเมื่อ 31 กรกฎาคม 2026 จึงไม่มีการแก้ไขช่องโหว่อีก ควรย้ายมา Nuxt 4 ซึ่งเปลี่ยนโครงสร้างให้โค้ดฝั่งแอปอยู่ในโฟลเดอร์ app เพิ่มโฟลเดอร์ shared สำหรับโค้ดที่ใช้ร่วมกับ Server และปรับการดึงข้อมูล เช่น data จาก useFetch เป็น shallowRef เป็นค่าเริ่มต้น การย้ายส่วนใหญ่ทำได้ไม่ยากและมี Codemod ช่วย หลักสูตรนี้มีตารางเทียบสิ่งที่เปลี่ยนให้ใช้อ้างอิง

หลักสูตร Basic Vue and Nuxt with Prisma and Supabase เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับนักพัฒนาเว็บที่อยากเริ่มทำงาน Full Stack ด้วย Vue และ Nuxt, Frontend Developer ที่อยากทำ API และฐานข้อมูลเอง ผู้ที่ใช้ Nuxt 3 อยู่และต้องการย้ายมา Nuxt 4 รวมถึงนักศึกษาและนักไอทีที่สนใจ ควรมีพื้นฐาน HTML, CSS และ JavaScript และเคยเขียนโค้ดมาบ้าง ไม่จำเป็นต้องมีประสบการณ์ Vue มาก่อน

เรียนหลักสูตรนี้ต้องเตรียมบัญชีหรือโปรแกรมอะไรบ้าง

ใช้โน้ตบุ๊กที่ติดตั้ง Node.js รุ่น LTS, VS Code และ Git ได้ และสมัครบัญชี Supabase, GitHub และ Vercel หรือ Netlify ในแผนใช้ฟรีด้วยตัวเองก่อนวันอบรม แผนใช้ฟรีมีโควตาตามเงื่อนไขของผู้ให้บริการ ซึ่งเพียงพอสำหรับ Lab ทั้งหมดในหลักสูตร