Web Development · WDC-103

Basic Vue and Nuxt 3 with Prisma and Supabase

12 hours 2 days

Last updated 25 Sep 2026

Basic Vue and Nuxt 3 with Prisma and Supabase is a 12-hour training course by IT Genius Institute. หลักสูตร Basic Vue and Nuxt 3 with Prisma and Supabase…

Training schedule

No public rounds are open right now — register your interest and we will contact you when the next round opens, or request an in-house session for your team.

Corporate training quote

Basic Vue and Nuxt 3 with Prisma and Supabase หลักสูตร Basic Vue and Nuxt 3 with Prisma and Supabase นี้ถูกออกแบบมาเพื่อให้ผู้เรียนที่มีความสนใจในการพัฒนาเว็บแอปพลิเคชันสามารถเข้าใจและนำไปประยุกต์ใช้ได้จริง Vue 3 ซึ่งเป็นเฟรมเวิร์กที่เน้นการสร้าง UI ที่ยืดหยุ่น พร้อมกับ Nuxt 3 ที่เน้นการทำงานกับ Server Side Rendering (SSR) จะช่วยให้ผู้เรียนได้เรียนรู้การพัฒนาแอปที่มีประสิทธิภาพสูง สำหรับ Prisma และ Supabase นั้นเป็นเครื่องมือที่ช่วยในการจัดการฐานข้อมูลและระบบหลังบ้านแบบ Full Stack โดยไม่ต้องเขียนโค้ดที่ซับซ้อน

หลักสูตรนี้จะเน้นการประยุกต์ใช้ Vue 3 และ Nuxt 3 ในการพัฒนาแอปพลิเคชัน รวมถึงการเชื่อมต่อกับฐานข้อมูลผ่าน Prisma และ Supabase ตั้งแต่ขั้นพื้นฐานไปจนถึงการ Deploy แอปพลิเคชันเข้าสู่ Production ทำให้ผู้เรียนได้รับทักษะที่ครบถ้วนและสามารถนำไปใช้งานจริงได้

Objectives

ให้ผู้เรียนสามารถเข้าใจหลักการและการใช้งาน Vue 3 Composition API
สอนให้ผู้เรียนสามารถสร้างแอปพลิเคชันที่ใช้ Nuxt 3 ในการจัดการเส้นทางและการทำงานฝั่งเซิร์ฟเวอร์
ให้ผู้เรียนเข้าใจการเชื่อมต่อและการจัดการฐานข้อมูลด้วย Prisma และ Supabase
เรียนรู้การพัฒนา Full Stack Application ด้วย Vue 3 และ Nuxt 3 อย่างเป็นระบบ
สามารถ Deploy แอปพลิเคชันสู่ Production ได้อย่างมีประสิทธิภาพ

Who this course is for

ผู้ที่ต้องการเรียนรู้การพัฒนาแอปที่มีประสิทธิภาพสูงด้วย Vue 3

Prerequisites

มีความรู้พื้นฐานเกี่ยวกับ HTML, CSS, และ JavaScript
เคยเขียนโค้ดด้วย JavaScript มาบ้าง
ความรู้พื้นฐานเกี่ยวกับการพัฒนาเว็บแอปพลิเคชัน (ไม่จำเป็นต้องมีประสบการณ์ลึกซึ้ง)

Curriculum

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

Frequently asked questions

Who is Basic Vue and Nuxt 3 with Prisma and Supabase for, and what background is needed?

Built for ผู้ที่ต้องการเรียนรู้การพัฒนาแอปที่มีประสิทธิภาพสูงด้วย Vue 3 Background you should have: มีความรู้พื้นฐานเกี่ยวกับ HTML, CSS, และ JavaScript · เคยเขียนโค้ดด้วย JavaScript มาบ้าง Not sure the fit is right? Talk to our team on LINE @itgenius or call 02-570-8449.

How much does Basic Vue and Nuxt 3 with Prisma and Supabase cost and how long does it run?

THB 6,500 (currently THB 5,850 on promotion). The course runs 12 hours. The fee covers course materials, lunch and refreshments throughout. Pay by bank transfer to the company account, confirm it on our payment page, and we can issue the receipt or tax invoice in your company's name.

Do I get a certificate?

Yes. Everyone who completes the course receives a Certificate of Completion from IT Genius Institute. Each certificate carries its own number, and anyone holding that number can verify it online on our certificate page, so you can add it to your portfolio or pass it to HR as evidence of training.

Where does the training take place, and is there an online option?

You can attend onsite at IT Genius Institute or arrange to join online, and we also run it as a private in-house session for your team. Ask about dates and venues on LINE @itgenius or call 02-570-8449.

What if I fall behind or miss a session — can I retake it?

Yes. You may retake the same course free of charge in a later round, under the institute's conditions. Tell our team which course and round you attended, and we will check it and offer you the rounds that still have seats. Ask us on LINE @itgenius or call 02-570-8449.

How do I enrol, or request a quotation for my company?

Enrol online with the registration form on this page. You can register several attendees at once and enter your tax ID and billing address for the tax invoice. Or request a company quotation straight from the quote button. For anything else call 02-570-8449 or reach us on LINE @itgenius.