พัฒนาเว็บไซต์ · MBC-30

Nuxt 3 Basic สำหรับผู้เริ่มต้น

หลักสูตร Nuxt 3 Basic สำหรับผู้เริ่มต้น เป็นการอบรมการใช้ Nuxt 3 ซึ่งเป็น Framework ที่สร้างบน Vue.js รองรับ Server Side Rendering และ PWA เหมาะกับเว็บที่ต้องทำ SEO ครอบคลุมโหมดการ Rendering, File-based Routing และการวาง Layout เหมาะกับ Developer และผู้สนใจที่มีพื้นฐาน HTML, CSS, JavaScript และ Vue.js มาแล้ว

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

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

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

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

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

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

Nuxt 3 Basic สำหรับผู้เริ่มต้น Nuxt เป็น Framework ตัวหนึ่งที่สร้างขึ้นจาก Vue.JS สำหรับใช้พัฒนา web application ที่รองรับรูปแบบการ render ฝั่ง Server หรือที่เรียกกันว่า Server Side Rendering (SSR) และยังรองรับการทำ Progressive Web Application (PWA) เหมาะสำหรับ web application ที่ต้องการทำ SEO เช่นเว็บบล๊อก ร้านค้า e-commerce เป็นต้น การเลือกใช้งาน Nuxt

ยังช่วยลดระยะเวลาในการพัฒนาแอพพลิเคชั่นลงได้มาก ด้วยโครงสร้างและรูปแบบที่ทาง Nuxt framework จัดเตรียมมาให้ อาทิ ระบบการทำ routing อัตโนมัติ (File-based routing) , ระบบการ import ไฟล์และ module ต่าง ๆ (Nuxt Auto Import) รวมไปถึงระบบการออกแบบและสร้าง API ได้เองภายในตัว นับว่าช่วยให้นักพัฒนาทำงานได้อย่างรวดเร็วและมีประสิทธิภาพอย่างมาก

ซึ่งในหลักสูตรนี้จะแนะนำภาพรวมตั้งแต่เริ่มต้นการใช้งานกับ Nuxt 3 ซึ่งเป็นเวอร์ชั่นล่าสุด ณ ปัจจุบัน ที่มาพร้อมความสามารถใหม่ ๆ มากมาย โดยจะเล่าตั้งแต่พื้นฐานที่สำคัญ อาทิ โหมดการ rendering ต่างๆ ใน Nuxt 3 ระบบ File-base routing การวาง layouts, component, pages ไปจนถึงเรื่องการเชื่อมต่อกับ Web API จึงเหมาะสำหรับผู้สนใจเกี่ยวกับการพัฒนาเว็บแอพสมัยใหม่ด้วย Nuxt 3 เพื่อนำไปประยุกต์ใช้ในการพัฒนาเว็บแอพของตัวเองได้ต่อไป

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

เข้าใจโหมดการ Render แบบต่างๆ ใน Nuxt 3
สร้าง Routing แบบ File-based และวาง Layout, Components และ Pages ได้
ใช้งาน Modules ภายนอก และเขียน API เบื้องต้นใน Nuxt 3
อ่านข้อมูลจาก API และจัดการ Error ใน Nuxt 3
Build และ Deploy โปรเจกต์ Nuxt 3 ไปใช้งานจริง

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

ผู้ที่ต้องการสร้างเว็บไซต์ด้วย Nuxt 3
Developers
กลุ่มผู้สนใจทั่วไป

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

พื้นฐาน HTML & CSS
พื้นฐาน JavaScript
พื้นฐานการใช้งาน Vue.js

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

ภาพรวมหัวข้อการอบรม

Section 1: โหมดการ Render แบบต่างๆ ใน Nuxt 3

Section 2: ระบบ Routing แบบ File-based routing

Section 3: การวาง Layout, Components และ Pages

Section 4: การเชื่อมโยงระหว่าง Component ด้วย Nuxt Link

Section 5: การใช้งาน Modules ภายนอกใน Nuxt 3

Section 6: การเขียน API เบื้องต้นใน Nuxt 3

Section 7: การอ่านข้อมูลจาก API ใน Nuxt 3

Section 8: การจัดการ Error ต่างๆ ใน Nuxt 3

Section 9: การ Build และ Deploy project ไปใช้งานจริง

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

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

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

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

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

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

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

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

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

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

Nuxt 3 มีโหมด Rendering แบบไหนบ้าง ต่างกันอย่างไร

Nuxt 3 ใช้ Universal Rendering เป็นค่าเริ่มต้น คือเซิร์ฟเวอร์สร้าง HTML ให้ก่อนแล้วเบราว์เซอร์ทำ Hydration ต่อ จึงโหลดหน้าแรกเร็วและดีต่อ SEO ถ้าตั้ง ssr: false จะเป็น Client-side Rendering แบบ SPA ที่เรนเดอร์ทั้งหมดในเบราว์เซอร์ ส่วน Hybrid Rendering ใช้ routeRules กำหนดแยกรายเส้นทางได้ เช่น ให้บางหน้า prerender เป็นไฟล์ static ตอน build และบางหน้าเรนเดอร์ฝั่งเซิร์ฟเวอร์ทุกครั้งที่มีคนเรียก

File-based Routing ใน Nuxt 3 ทำงานอย่างไร

Nuxt สร้างเส้นทางให้อัตโนมัติจากไฟล์ในโฟลเดอร์ pages เช่น pages/index.vue คือหน้าแรก pages/about.vue คือ /about และไฟล์ที่ชื่อมีวงเล็บเหลี่ยมอย่าง pages/products/[id].vue คือเส้นทางแบบ Dynamic ที่อ่านค่า id ได้จาก useRoute ส่วนการลิงก์ระหว่างหน้าให้ใช้คอมโพเนนต์ NuxtLink ซึ่งเปลี่ยนหน้าฝั่งเบราว์เซอร์โดยไม่โหลดใหม่ทั้งหน้า

เขียน API และดึงข้อมูลใน Nuxt 3 มีขั้นตอนอย่างไร

เริ่มจากสร้างไฟล์ในโฟลเดอร์ server/api เช่น server/api/products.ts แล้วส่งค่ากลับด้วย defineEventHandler ซึ่ง Nuxt จะเปิดเป็นเส้นทาง /api/products ให้เอง จากนั้นเรียกข้อมูลในหน้า Vue ด้วย useFetch ซึ่งดึงข้อมูลครั้งเดียวตอนเรนเดอร์ฝั่งเซิร์ฟเวอร์และส่งต่อให้เบราว์เซอร์ แล้วจึงใช้สถานะ pending และ error ที่ useFetch คืนมาแสดงข้อความกำลังโหลดหรือข้อผิดพลาด

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

เหมาะกับนักพัฒนาเว็บและผู้สนใจที่อยากสร้างเว็บที่รองรับ Server Side Rendering และทำ SEO ได้ดี เช่น บล็อกหรือร้านค้าออนไลน์ ควรมีพื้นฐาน HTML CSS และ JavaScript และเคยใช้งาน Vue.js มาบ้าง เพราะ Nuxt สร้างอยู่บน Vue และใช้แนวคิดเรื่อง Component ของ Vue โดยตรง

เรียนจบหลักสูตร Nuxt 3 Basic สำหรับผู้เริ่มต้น แล้วทำอะไรได้บ้าง

เลือกโหมด Rendering ให้เหมาะกับแต่ละหน้า วางโครงเว็บด้วย File-based Routing, Layout, Components และ Pages เพิ่ม Module ภายนอกเข้าโปรเจกต์ เขียน API เบื้องต้นใน Nuxt แล้วดึงข้อมูลมาแสดง จัดการ Error และ Build โปรเจกต์ขึ้นใช้งานจริงได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

จัดอบรมหลักสูตร Nuxt 3 Basic สำหรับผู้เริ่มต้น ให้ทีมในองค์กรได้ไหม

ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับงานของทีม เช่น ฝึกกับเว็บหรือ API ที่ทีมดูแลอยู่ ขอใบเสนอราคาได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449