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

Nuxt Advanced

หลักสูตร Nuxt Advanced เป็นการอบรมต่อยอดจาก Nuxt Basic ด้วย Nuxt 4 ครอบคลุมโครงสร้างโปรเจกต์ขนาดใหญ่ การจัดการ Error เว็บหลายภาษาด้วย i18n, Server API ด้วย Nitro, Prisma กับ PostgreSQL, Pinia, ระบบ Login แบบ Session และ OAuth การทดสอบและการ Deploy เหมาะกับ Developer ที่มีพื้นฐาน Vue.js และ Nuxt มาแล้ว

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

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

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

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

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

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

เมื่อเว็บที่สร้างด้วย Nuxt เริ่มมีหลายหน้า หลายภาษา มีฐานข้อมูล และมีระบบสมาชิก โจทย์จะเปลี่ยนจากการทำให้หน้าเว็บแสดงผลได้ ไปเป็นการวางโครงสร้างให้ทีมดูแลต่อได้ จัดการ Error อย่างเป็นระบบ ป้องกันข้อมูลฝั่ง Server และทำให้เว็บยังเร็วเมื่อผู้ใช้เพิ่มขึ้น ซึ่ง Nuxt มีเครื่องมือรองรับครบในโปรเจกต์เดียว

หลักสูตรนี้ต่อยอดจาก Nuxt Basic for Beginners ด้วย Nuxt 4 รุ่นปัจจุบัน ครอบคลุมโครงสร้างโปรเจกต์ขนาดใหญ่ การจัดการ Error เว็บหลายภาษา Server API ด้วย Nitro ฐานข้อมูล PostgreSQL ผ่าน Prisma 7 State ด้วย Pinia ระบบ Login แบบ Session และ OAuth การทดสอบ การใช้ Cache และปิดท้ายด้วย Workshop และการ Deploy (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Advanced)

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

วางโครงสร้างโปรเจกต์ Nuxt 4 ให้รองรับงานขนาดใหญ่ด้วย Layers และ TypeScript
จัดการ Error ทั้งฝั่ง Client และ Server อย่างเป็นระบบ
สร้างเว็บหลายภาษาด้วย Nuxt i18n พร้อม SEO ของแต่ละภาษา
เขียน Server API ที่ตรวจข้อมูลขาเข้า และเชื่อม PostgreSQL ด้วย Prisma 7
จัดการ State ด้วย Pinia และทำระบบ Login แบบ Session และ OAuth
ทดสอบ ปรับประสิทธิภาพ และ Deploy แอป Nuxt ขึ้น Cloud ได้

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

Developer ที่ใช้ Nuxt หรือ Vue สร้างเว็บอยู่และต้องการทำระบบที่ใหญ่ขึ้น
Full Stack Developer ที่ต้องการทำ API, ฐานข้อมูล และระบบสมาชิกใน Nuxt
ทีมที่ดูแลโปรเจกต์ Nuxt 3 เดิมและต้องการย้ายมา Nuxt 4
ผู้ที่ผ่านหลักสูตร Nuxt Basic for Beginners หรือมีประสบการณ์ใกล้เคียง

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

เขียน HTML, CSS และ JavaScript ได้คล่อง
เขียน Vue.js แบบ script setup ได้
เคยสร้างเว็บด้วย Nuxt มาบ้าง ทั้ง Routing, Layout และ useFetch
เข้าใจ HTTP, REST API และฐานข้อมูลเชิงสัมพันธ์เบื้องต้น
โน้ตบุ๊กที่ติดตั้ง Node.js รุ่น LTS, VS Code และ Docker Desktop ได้

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

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

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Nuxt 3 Advanced อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ระดับ Advanced เนื่องจาก Nuxt 3 สิ้นสุดการดูแลแล้ว ฉบับนี้จึงย้ายมาใช้ Nuxt 4 โดยยังคงแกนเดิมคือโครงสร้างโปรเจกต์ขนาดใหญ่ การจัดการ Error, Utilities,

เว็บหลายภาษาด้วย i18n, Server API, Data Fetching, Prisma กับ PostgreSQL, Pinia, Authentication และการ Deploy และเพิ่ม Nuxt Layers, Lazy Hydration, การตรวจข้อมูลด้วย Zod, การทดสอบด้วย Vitest และการ Cache ระบบ Login ใช้ nuxt-auth-utils ทั้งแบบ Session และ OAuth แทนการพึ่ง Supabase Auth ผู้เรียนได้ Lab Guide และซอร์สโค้ดระบบร้านค้าหลายภาษากลับไปใช้งานต่อ

Day 1 โครงสร้าง, Error, ประสิทธิภาพ และหลายภาษา

Section 1: Lab: โครงสร้างโปรเจกต์ Nuxt 4 ขนาดใหญ่

โฟลเดอร์ app, server และ shared และสิ่งที่เปลี่ยนจาก Nuxt 3
แยกส่วนของระบบด้วย Nuxt Layers และ extends
TypeScript แบบ Strict, nuxt typecheck และ @nuxt/eslint
Lab: วางโครงโปรเจกต์ระบบร้านค้าที่แยกตาม Feature

Section 2: Lab: Custom Layout, Composables และ UI

Layout แบบ Custom และ Layout ที่สลับตามบทบาทผู้ใช้
แยก Logic เป็น Composable ที่มี Type ชัดเจน
Nuxt UI กับ Tailwind CSS ปรับ Theme ให้ตรงกับแบรนด์
ฟอนต์และไอคอนด้วย Nuxt Fonts และ Nuxt Icon
Lab: หน้าร้านค้าและหน้าผู้ดูแลระบบคนละ Layout

Section 3: การจัดการ Error ฝั่ง Client และ Server

หน้า Error รวมด้วย error.vue, useError และ clearError
ส่ง Error ด้วย createError พร้อม status, statusText และ data
Error เฉพาะส่วนของหน้าด้วย NuxtErrorBoundary
บันทึก Error ฝั่ง Server ด้วย Nitro Plugin และ Hook
Lab: หน้า 404 และ Card แสดงข้อผิดพลาดที่กู้คืนได้

Section 4: Utilities และประสิทธิภาพ

ปรับรูปภาพด้วย NuxtImg และรูปแบบไฟล์สมัยใหม่
useState และ Composable จาก VueUse
Lazy Component และ Lazy Hydration เช่น hydrate-on-visible
บังคับ Render ฝั่ง Client เฉพาะส่วนด้วย ClientOnly
Lab: หน้าแรกที่โหลดเร็วขึ้นและวัดผลด้วย Lighthouse

Section 5: Lab: เว็บหลายภาษาด้วย Nuxt i18n

ติดตั้ง @nuxtjs/i18n และไฟล์แปลในโฟลเดอร์ i18n/locales
Strategy ของ URL เช่น prefix_except_default และปุ่มเปลี่ยนภาษา
Named Formatting, Pluralization และรูปแบบตัวเลขกับวันที่
useLocalePath และ SEO ของแต่ละภาษาด้วย hreflang
Lab: เว็บร้านค้าภาษาไทยและภาษาอังกฤษ

Day 2 Server API, ฐานข้อมูล และ State

Section 6: Lab: สร้าง API ด้วย Nitro

Server Route, API Route และ Catch-all Route
Server Middleware และ Server Utils ที่ใช้ร่วมกัน
ตรวจข้อมูลขาเข้าด้วย readValidatedBody และ Zod
Type ที่ใช้ร่วมกันระหว่างหน้าเว็บกับ API ในโฟลเดอร์ shared
Lab: API สินค้าและทดสอบด้วย REST Client

Section 7: Lab: Data Fetching และ HTTP Requests

อ่าน Path Parameter และ Query Parameter ฝั่ง Server
useFetch และ useAsyncData กับ key, lazy, watch และ transform
$fetch แบบกำหนดค่าเองพร้อม Header และ Interceptor
จัดการ Error จาก API และสถานะโหลดให้ผู้ใช้เห็น
Lab: หน้ารายการสินค้าพร้อมค้นหา กรอง และแบ่งหน้า

Section 8: Lab: Prisma 7 กับ PostgreSQL

รัน PostgreSQL ด้วย Docker หรือฐานข้อมูลคลาวด์
prisma.config.ts, schema.prisma และ Generator แบบ prisma-client
Driver Adapter ของ PostgreSQL และ PrismaClient ใน server/utils
Migration, Relation และ Seed ข้อมูลตัวอย่าง
Lab: Model สินค้า หมวดหมู่ และคำสั่งซื้อ

Section 9: Lab: CRUD และ Transaction

API แบบ GET, POST, PUT และ DELETE ที่ใช้ Prisma
Pagination, การค้นหา และ Select เฉพาะฟิลด์ที่ต้องใช้
Transaction สำหรับงานที่ต้องสำเร็จพร้อมกัน
แปลง Error ของฐานข้อมูลเป็นข้อความที่ปลอดภัย
Lab: ระบบสั่งซื้อที่ตัดสต็อกพร้อมกันในครั้งเดียว

Section 10: Lab: จัดการ State ด้วย Pinia

เมื่อไร useState พอ และเมื่อไรควรใช้ Pinia
ติดตั้ง @pinia/nuxt และเขียน Setup Store
State ที่ปลอดภัยกับ SSR และ skipHydrate
ตรวจ State ด้วย Vue DevTools
Lab: Store ตะกร้าสินค้าที่เชื่อมกับ API

Day 3 Authentication, Testing, Cache และ Deploy

Section 11: Lab: Session Authentication ด้วย nuxt-auth-utils

ติดตั้งโมดูลและตั้งค่า NUXT_SESSION_PASSWORD
สมัครสมาชิกและ Login ด้วย hashPassword และ verifyPassword
setUserSession และ useUserSession ฝั่งหน้าเว็บ
ป้องกัน API ด้วย requireUserSession และ Logout
Lab: ระบบสมาชิกของร้านค้าแบบ Session

Section 12: Lab: OAuth Login และ Middleware

สร้าง OAuth Client ใน Google Cloud และตั้ง Callback URL
Login ด้วย Google ผ่าน defineOAuthGoogleEventHandler
Route Middleware แบบ Inline, แบบตั้งชื่อ และแบบ Global
สิทธิ์ตามบทบาททั้งฝั่งหน้าเว็บและ API
เทียบแนวทางนี้กับ Supabase Auth

Section 13: Lab: ทดสอบแอป Nuxt

ติดตั้ง Vitest และ @nuxt/test-utils
ทดสอบ Composable และ Utility แบบ Unit Test
ทดสอบ Component ด้วย mountSuspended
ทดสอบ Server API ด้วยข้อมูลจำลอง
Lab: ชุดทดสอบตะกร้าสินค้าและ API สั่งซื้อ

Section 14: Cache และ Hybrid Rendering

กำหนดวิธี Render รายเส้นทางด้วย routeRules
Prerender, SWR และ ISR สำหรับหน้าที่เปลี่ยนไม่บ่อย
Cache ผลลัพธ์ของ API ด้วย defineCachedEventHandler
Lab: หน้าสินค้าแบบ SWR และ API ที่ใช้ Cache

Section 15: Workshop: Deploy ระบบ Full Stack

เตรียม Environment Variable และ runtimeConfig อย่างปลอดภัย
Build และเลือก Nitro Preset ให้ตรงกับผู้ให้บริการ
Deploy ขึ้น Vercel, Netlify หรือ Render พร้อมฐานข้อมูลคลาวด์
Checklist ความปลอดภัยและประสิทธิภาพก่อนเปิดใช้งาน
Workshop: ระบบร้านค้าหลายภาษาพร้อม Login ที่ใช้งานได้จริง

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

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

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

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

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

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

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

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

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

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

สร้าง API ด้วย Nuxt ทำอย่างไร

Nuxt ใช้ Nitro เป็น Server ในตัว สร้างไฟล์ในโฟลเดอร์ server/api แล้ว export defineEventHandler ก็ได้ Endpoint ตามชื่อไฟล์ เช่น server/api/products.post.ts เป็น POST /api/products อ่าน Body พร้อมตรวจข้อมูลได้ด้วย readValidatedBody ร่วมกับ Zod ส่ง Error ด้วย createError และวางโค้ดที่ใช้ร่วมกัน เช่น PrismaClient ไว้ใน server/utils ส่วน Type ที่หน้าเว็บกับ API ใช้ร่วมกันวางในโฟลเดอร์ shared ได้

จัดการ Error ใน Nuxt ทั้งฝั่ง Client และ Server ทำอย่างไร

ฝั่ง Server ใช้ createError พร้อม status และ statusText เพื่อส่ง Error ที่มีความหมายกลับไป ฝั่งหน้าเว็บ Error ร้ายแรงจะแสดงผ่านหน้า error.vue ซึ่งอ่านค่าได้จาก useError และล้างด้วย clearError ส่วน Error ที่เกิดเฉพาะบางส่วนของหน้าให้ครอบด้วย NuxtErrorBoundary เพื่อแสดงข้อความแทนส่วนนั้นโดยไม่ทำให้ทั้งหน้าพัง และควรบันทึก Error ฝั่ง Server ผ่าน Nitro Plugin เพื่อตรวจย้อนหลังได้

ทำเว็บหลายภาษาด้วย Nuxt i18n มีขั้นตอนอะไรบ้าง

ติดตั้งโมดูล @nuxtjs/i18n แล้วกำหนดภาษาใน nuxt.config.ts พร้อมไฟล์แปลของแต่ละภาษาในโฟลเดอร์ i18n/locales เลือก Strategy ของ URL เช่น prefix_except_default ให้ภาษาหลักไม่มีคำนำหน้า ใช้ $t หรือ useI18n แสดงข้อความ ใช้ useLocalePath สร้างลิงก์ตามภาษา และตั้งค่า language กับ baseUrl เพื่อให้โมดูลสร้างแท็ก hreflang สำหรับ SEO ของแต่ละภาษา

ทำไมหลักสูตรนี้ใช้ Prisma 7 ไม่ใช่ Prisma 8

ณ ตอนปรับปรุงหลักสูตร Prisma ORM 7 เป็นรุ่นที่ใช้งานจริงได้ ส่วน Prisma 8 ยังอยู่ในสถานะรุ่นทดสอบ และแพ็กเกจรุ่นล่าสุดบน npm อาจชี้ไปที่รุ่นทดสอบนั้น หลักสูตรจึงกำหนดเวอร์ชัน 7 ในโปรเจกต์ให้ชัดเจน และใช้แนวทางปัจจุบันของ Prisma 7 คือ prisma.config.ts, Generator แบบ prisma-client และ Driver Adapter ของ PostgreSQL หากมีรุ่นใหม่ออกเป็นทางการ ผู้สอนจะอธิบายความต่างตามสถานะ ณ วันอบรม

หลักสูตร Nuxt Advanced เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับ Developer ที่ใช้ Nuxt หรือ Vue อยู่แล้วและต้องการทำระบบที่ใหญ่ขึ้น Full Stack Developer ที่อยากทำ API ฐานข้อมูล และระบบสมาชิกใน Nuxt และทีมที่ต้องย้ายโปรเจกต์จาก Nuxt 3 มา Nuxt 4 ควรเขียน Vue แบบ script setup ได้ เคยใช้ Nuxt ทำ Routing, Layout และ useFetch มาแล้ว และเข้าใจ REST API กับฐานข้อมูลเบื้องต้น หากยังไม่เคยใช้ Nuxt ควรเริ่มจาก Nuxt Basic for Beginners

เรียนจบหลักสูตร Nuxt Advanced แล้วทำอะไรได้บ้าง

วางโครงสร้างโปรเจกต์ Nuxt 4 ให้ทีมดูแลต่อได้ จัดการ Error อย่างเป็นระบบ ทำเว็บหลายภาษาที่รองรับ SEO เขียน Server API ที่ตรวจข้อมูลขาเข้า เชื่อม PostgreSQL ด้วย Prisma ใช้ Pinia จัดการ State ทำระบบ Login แบบ Session และ OAuth เขียนชุดทดสอบ ใช้ Cache ให้เว็บเร็วขึ้น และ Deploy ระบบ Full Stack ขึ้น Cloud ได้เอง