What rendering modes does Nuxt offer, and how do they differ?

Nuxt renders on the server (SSR) by default, so the browser and search engines first receive complete HTML, which is then hydrated to become interactive. You can also prerender pages as static files (SSG), render only on the client (CSR) or mix modes in one app (hybrid rendering) by setting routeRules per route, for example prerendering the home page and rendering a dashboard on the client.

How does file-based routing work in Nuxt?

Nuxt builds routes automatically from files in the pages directory, so pages/about.vue becomes /about, and a file with square brackets such as pages/posts/[id].vue is a dynamic route whose value you read with useRoute. In Nuxt 4 the pages directory sits inside the app directory, and NuxtLink links pages and prefetches the next page for you, so you do not write router configuration yourself.

How do you write an API and fetch data in Nuxt?

Create a file in server/api that exports a defineEventHandler returning your data, and Nuxt creates an endpoint from the file name, so server/api/posts.get.ts becomes GET /api/posts. In a page, use useFetch to load the data, which works during SSR and on the client without fetching twice and returns data, status and error for the template. For user actions such as submitting a form, use $fetch.

How is Nuxt 4 different from Nuxt 3?

Nuxt 3 reached end of life on 31 July 2026 and no longer receives security fixes. Nuxt 4 moves app code into the app directory, adds a shared directory for code used by both app and server, and adjusts data fetching, for example data from useFetch is a shallowRef by default. Core ideas such as routing, layouts and server APIs stay the same, and the course includes a comparison table for migrating existing projects.

Who is the Nuxt Basic for Beginners course for, and what should I know beforehand?

It suits people who want fast, SEO-friendly websites, Vue developers moving from single-page apps to SSR, frontend developers maintaining Nuxt 3 projects and interested students. You should know basic HTML, CSS and JavaScript and have written some Vue.js. If you have never used Vue, choose Basic Vue and Nuxt with Prisma and Supabase instead.

What can I do after completing Nuxt Basic for Beginners?

You can build a Nuxt 4 site from scratch to production: structure the project, choose the right rendering mode for each page, set up routing, layouts and middleware, write basic server APIs, fetch data and handle errors, set SEO meta tags and deploy to the cloud. You are also ready for Nuxt Advanced, which goes deeper into databases, authentication and multilingual sites.

ພັດທະນາເວັບໄຊ · MBC-30

Nuxt Basic for Beginners

หลักสูตร Nuxt Basic for Beginners เป็นการอบรมพื้นฐาน Nuxt 4 เฟรมเวิร์กบน Vue.js ครอบคลุมโหมดการ Render, File-based Routing, Layout, Module, Server API การดึงข้อมูล การจัดการ Error และ SEO เหมาะกับนักพัฒนาเว็บและนักศึกษาที่เขียน Vue.js มาแล้ว จบแล้ว Deploy เว็บ Nuxt ขึ้นใช้งานจริงได้

ອັບເດດລ່າສຸດ 9 ຕ.ລ. 2026

ລາຄາເລີ່ມຕົ້ນ 5,850 ບາດ / ທ່ານ 6,500 −10% ຍັງບໍ່ລວມ VAT 7% · ມີລາຄາໝູ່ຄະນະ

ຂໍໃບສະເໜີລາຄາຝຶກອົບຮົມອົງກອນ ລົງຊື່ຈອງໄວ້

PDFດາວໂຫຼດ Course Outline

ໄລຍະເວລາ12 ຊົ່ວໂມງ · 2 ມື້
ຮູບແບບຢູ່ສະຖາບັນ / ອອນລາຍສົດ
ຮອບຕໍ່ໄປເປີດຕາມຄຳຂໍ
ໃບຢັ້ງຢືນມີໃບຢັ້ງຢືນ

ພາບລວມຫຼັກສູດ

Nuxt เป็นเฟรมเวิร์กที่สร้างบน Vue.js ช่วยให้สร้างเว็บที่ Render ฝั่ง Server ได้ หน้าเว็บจึงโหลดเร็วและเหมาะกับงานที่ต้องทำ SEO เช่น เว็บบริษัท บล็อก และร้านค้าออนไลน์ Nuxt เตรียมโครงสร้างที่ใช้บ่อยไว้ให้ ทั้ง Routing จากไฟล์ Auto Import ระบบ Module และ Server API ในโปรเจกต์เดียว ทีมจึงเริ่มงานได้เร็วโดยไม่ต้องตั้งค่าเองทุกอย่าง

หลักสูตรนี้สอน Nuxt 4 รุ่นปัจจุบันสำหรับผู้ที่เขียน Vue.js มาแล้ว เริ่มจากโครงสร้างโปรเจกต์และโหมดการ Render ต่อด้วย Routing, Layout, Component, Middleware และ State จากนั้นใช้ Module เขียน Server API เบื้องต้น ดึงข้อมูล จัดการ Error ทำ SEO และปิดท้ายด้วยการ Build และ Deploy เว็บขึ้นใช้งานจริง (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Beginner)

ສິ່ງທີ່ທ່ານຈະໄດ້ຮັບ

สร้างและจัดโครงสร้างโปรเจกต์ Nuxt 4 ได้ถูกต้อง
อธิบายความต่างของ SSR, SSG, CSR และ Hybrid Rendering และเลือกใช้ได้
สร้าง File-based Routing, Layout, Component และ Route Middleware ได้
ใช้ Nuxt Module และเขียน Server API เบื้องต้นใน Nuxt ได้
ดึงข้อมูลด้วย useFetch, useAsyncData และ $fetch และจัดการ Error ได้
Build และ Deploy โปรเจกต์ Nuxt ขึ้นใช้งานจริงได้

ຫຼັກສູດນີ້ເໝາະສຳລັບ

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

ພື້ນຖານຂອງຜູ້ເຂົ້າຝຶກອົບຮົມ

เขียน HTML และ CSS พื้นฐานได้
เขียน JavaScript ได้ ทั้ง Array, Object, Module และ async กับ await
เคยเขียน Vue.js มาบ้าง เช่น Component, Props และ ref
โน้ตบุ๊กที่ติดตั้ง Node.js รุ่น LTS และ VS Code ได้

ຫົວຂໍ້ການຝຶກອົບຮົມ

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

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

Render, File-based Routing, Layout, Component, NuxtLink, Module, Server API, การดึงข้อมูล การจัดการ Error และการ Deploy และเพิ่ม Route Middleware, State ด้วย useState และ SEO ด้วย useSeoMeta หลักสูตรนี้เหมาะกับผู้ที่เขียน Vue มาแล้ว ต่างจาก Basic Vue and Nuxt with Prisma and Supabase ที่สอน Vue ตั้งแต่ต้นพร้อมฐานข้อมูล ผู้เรียนได้ Lab Guide และซอร์สโค้ดเว็บบทความกลับไปใช้งานต่อ

Day 1 โครงสร้าง Nuxt 4, Rendering และ Routing

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

Nuxt คืออะไร และต่างจาก Vue ที่ใช้ Vite อย่างไร
สร้างโปรเจกต์ด้วย npm create nuxt และคำสั่งของ Nuxt CLI
โครงสร้างโฟลเดอร์ app, server, shared และ public
ตั้งค่า nuxt.config.ts และสำรวจแอปด้วย Nuxt DevTools
Lab: โปรเจกต์ Nuxt แรกที่รันบนเครื่องของตัวเอง

Section 2: โหมดการ Render ใน Nuxt

CSR, SSR, SSG และ Hybrid Rendering ต่างกันอย่างไร
Hydration คืออะไร และโค้ดที่ทำงานได้เฉพาะในเบราว์เซอร์
ใช้ ClientOnly และ onMounted เมื่อจำเป็น
Lab: เทียบผล View Source ของหน้า SSR และ CSR

Section 3: Lab: File-based Routing

สร้างหน้าในโฟลเดอร์ pages และหน้าแรก index.vue
Dynamic Route เช่น [id].vue และอ่านค่าด้วย useRoute
Nested Route ด้วย NuxtPage และ Catch-all Route
Lab: เว็บบทความที่มีหน้ารายการและหน้ารายละเอียด

Section 4: Layout, Component และ Pages

app.vue และ Layout เริ่มต้นในโฟลเดอร์ layouts
เลือก Layout รายหน้าด้วย definePageMeta
Auto Import ของ Component, การตั้งชื่อตามโฟลเดอร์ และ Lazy Component
Lab: Header, Footer และ Layout สำหรับหน้าสมาชิก

Section 5: NuxtLink, การนำทาง และ Middleware

เชื่อมหน้าด้วย NuxtLink และการ Prefetch อัตโนมัติ
เปลี่ยนหน้าจากโค้ดด้วย navigateTo
Route Middleware แบบเฉพาะหน้า แบบตั้งชื่อ และแบบ Global
Lab: Middleware กันหน้าที่ต้องเข้าสู่ระบบก่อน

Section 6: Lab: State และ Composable

useState สำหรับ State ที่แชร์ได้และปลอดภัยกับ SSR
เขียน Composable และ Utility ที่ Auto Import ได้
runtimeConfig และ app.config สำหรับค่าคอนฟิก
Lab: ตะกร้าสินค้าที่ใช้ข้อมูลร่วมกันทุกหน้า

Day 2 Module, Server API, ข้อมูล และ Deploy

Section 7: Lab: ใช้งาน Nuxt Module

ค้นหาและติดตั้ง Module ด้วย npx nuxt module add
Nuxt UI กับ Tailwind CSS สำหรับสร้างหน้าจอได้เร็ว
Nuxt Image และ Component NuxtImg สำหรับรูปภาพ
Lab: ปรับหน้าเว็บบทความด้วย Nuxt UI และรูปที่ปรับขนาดอัตโนมัติ

Section 8: Lab: เขียน Server API เบื้องต้น

สร้าง API ในโฟลเดอร์ server/api ด้วย defineEventHandler
แยกตาม HTTP Method ด้วยไฟล์ .get.ts และ .post.ts
อ่าน Query, Route Param และ Body ของคำขอ
เก็บข้อมูลชั่วคราวด้วย Storage ของ Nitro
Lab: API บทความที่เพิ่มและอ่านข้อมูลได้

Section 9: Lab: อ่านข้อมูลจาก API

useFetch, useAsyncData และ $fetch ใช้ต่างกันอย่างไร
ดึงข้อมูลตอน SSR โดยไม่ดึงซ้ำฝั่ง Client
status, error, refresh และการดึงใหม่เมื่อค่าเปลี่ยน
Lab: หน้ารายการบทความพร้อมค้นหาและสถานะโหลด

Section 10: การจัดการ Error ใน Nuxt

ส่ง Error ด้วย createError ทั้งฝั่งหน้าเว็บและ Server
หน้า Error รวมด้วย error.vue และ clearError
showError และ NuxtErrorBoundary สำหรับ Error เฉพาะส่วน
Lab: หน้า 404 และข้อความ Error ที่ผู้ใช้อ่านเข้าใจ

Section 11: SEO และ Meta Tag

ตั้ง Title และ Description ด้วย useSeoMeta และ useHead
Open Graph สำหรับการแชร์ลิงก์บนโซเชียล
Prerender หน้าที่เปลี่ยนไม่บ่อยด้วย routeRules
Lab: Meta Tag ของหน้าบทความที่เปลี่ยนตามเนื้อหา

Section 12: Workshop: Build และ Deploy

nuxt build และ nuxt generate ต่างกันอย่างไร
Environment Variable และ runtimeConfig บน Production
Deploy ขึ้น Vercel หรือ Netlify ผ่าน GitHub
Workshop: เว็บบทความครบทุกส่วนที่ใช้งานได้จริงบน Cloud

ຮອບຝຶກອົບຮົມ ແລະ ຮູບແບບການຝຶກອົບຮົມ

ສຳລັບບຸກຄົນ — ຮອບຝຶກອົບຮົມທົ່ວໄປ

ຂະນະນີ້ຍັງບໍ່ມີຮອບຝຶກອົບຮົມເປີດຮັບສະໝັກ ລົງຊື່ຈອງໄວ້ໄດ້ເລີຍ ທີມງານຈະຕິດຕໍ່ກັບເປັນກຸ່ມທຳອິດເມື່ອເປີດຮອບຕໍ່ໄປ ຫຼື ສອບຖາມທາງ LINE ຫຼື ໂທ 02-570-8449 ຫຼື 088-807-9770

ລົງຊື່ຈອງໄວ້ ສອບຖາມຮອບຝຶກອົບຮົມ

ສຳລັບອົງກອນ — In-house / Private Training

ປັບເນື້ອໃນໃຫ້ກົງກັບເຄື່ອງມື ແລະ ວຽກຈິງຂອງທີມ
ເລືອກວັນເອງ ຝຶກອົບຮົມທີ່ບໍລິສັດ ຫຼື ອອນລາຍສົດ
ອອກໃບສະເໜີລາຄາໃນນາມນິຕິບຸກຄົນໃຫ້ຝ່າຍຈັດຊື້

ຂໍໃບສະເໜີລາຄາຝຶກອົບຮົມອົງກອນ

ວິທະຍາກອນຜູ້ສອນ

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

ຄຳຖາມທີ່ພົບເລື້ອຍ

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

Nuxt Render ฝั่ง Server (SSR) เป็นค่าเริ่มต้น หน้าเว็บจึงส่ง HTML ที่มีเนื้อหาครบไปให้เบราว์เซอร์และ Search Engine ก่อน แล้วค่อย Hydrate ให้โต้ตอบได้ นอกจากนี้ยังสร้างหน้าเป็นไฟล์ Static ล่วงหน้า (SSG) Render เฉพาะฝั่ง Client (CSR) หรือผสมหลายแบบในแอปเดียว (Hybrid Rendering) โดยกำหนดรายเส้นทางด้วย routeRules เช่น ให้หน้าแรก Prerender และหน้า Dashboard Render ฝั่ง Client

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

Nuxt สร้างเส้นทางของเว็บจากไฟล์ในโฟลเดอร์ pages โดยอัตโนมัติ เช่น pages/about.vue กลายเป็น /about ส่วนไฟล์ที่มีวงเล็บเหลี่ยมอย่าง pages/posts/[id].vue เป็น Dynamic Route ที่อ่านค่าได้ด้วย useRoute ใน Nuxt 4 โฟลเดอร์ pages อยู่ใต้โฟลเดอร์ app และเชื่อมหน้าด้วย NuxtLink ที่ Prefetch หน้าถัดไปให้เอง ไม่ต้องเขียนไฟล์ตั้งค่า Router เอง

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

สร้างไฟล์ในโฟลเดอร์ server/api แล้ว export defineEventHandler ที่คืนค่าข้อมูลออกไป Nuxt จะสร้าง Endpoint ให้ตามชื่อไฟล์ เช่น server/api/posts.get.ts เป็น GET /api/posts จากนั้นในหน้าเว็บใช้ useFetch ดึงข้อมูล ซึ่งทำงานได้ทั้งตอน SSR และฝั่ง Client โดยไม่ดึงซ้ำ และคืนค่า data, status และ error ให้ใช้ในเทมเพลต ส่วนงานที่เกิดจากผู้ใช้ เช่น กดส่งฟอร์ม ให้ใช้ $fetch

Nuxt 4 ต่างจาก Nuxt 3 อย่างไร

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

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

เหมาะกับผู้ที่ต้องการสร้างเว็บที่โหลดเร็วและรองรับ SEO, Vue Developer ที่อยากก้าวจาก SPA ไปสู่ SSR, Frontend Developer ที่ดูแลโปรเจกต์ Nuxt 3 เดิม รวมถึงนักศึกษาที่สนใจ ควรมีพื้นฐาน HTML, CSS และ JavaScript และเคยเขียน Vue.js มาบ้าง ผู้ที่ยังไม่เคยเขียน Vue เลยควรเลือกหลักสูตร Basic Vue and Nuxt with Prisma and Supabase

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

สร้างเว็บด้วย Nuxt 4 ได้ตั้งแต่ต้นจนขึ้นใช้งานจริง ทั้งวางโครงสร้างโปรเจกต์ เลือกวิธี Render ให้เหมาะกับแต่ละหน้า ทำ Routing, Layout และ Middleware เขียน Server API เบื้องต้น ดึงข้อมูลและจัดการ Error ตั้ง Meta Tag สำหรับ SEO และ Deploy ขึ้น Cloud พร้อมต่อยอดสู่หลักสูตร Nuxt Advanced ที่เจาะลึกเรื่องฐานข้อมูล ระบบสมาชิก และเว็บหลายภาษา