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

Advanced Vue.js 3

หลักสูตร Advanced Vue.js 3 เป็นการอบรมต่อยอดการพัฒนาแอป Vue 3.5 ด้วย TypeScript และ Vite ออกแบบ Composable ใช้ VueUse, Pinia 4, Vuetify 4 และ PrimeVue เชื่อม Firebase และทดสอบด้วย Vitest เหมาะกับ Front-end Developer ที่เขียน Vue 3 ได้แล้ว จบแล้วได้แอปที่ Deploy ขึ้นใช้งานจริง

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

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

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

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

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

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

เมื่อเขียน Vue 3 ได้แล้ว งานจริงในองค์กรมักต้องการมากกว่าพื้นฐาน ทั้งโค้ดที่มี Type ชัดเจน ตรรกะที่แยกเป็น Composable ใช้ซ้ำได้ State ที่จัดการเป็นระบบ UI Library ที่ทำหน้าจอได้เร็ว การเชื่อมต่อ Backend การทดสอบ และการนำขึ้นใช้งานจริง ทีมที่วางรากฐานเหล่านี้ไว้ดีจะขยายแอปได้โดยไม่ต้องรื้อโค้ดซ้ำ

หลักสูตรนี้ต่อยอดจาก Basic Vue.js 3 ด้วย Vue 3.5 แบบ script setup ร่วมกับ TypeScript และ Vite เจาะลึก Composition API และการออกแบบ Composable ใช้ VueUse, Pinia 4, Vuetify 4 และ PrimeVue จัดสไตล์ด้วย CSS Modules และ Tailwind CSS เชื่อม Firebase ทั้ง Firestore และ Authentication ใส่ Rich Text Editor ด้วย CKEditor 5 ทดสอบด้วย Vitest แล้วปิดท้ายด้วยโปรเจกต์ที่ Deploy ขึ้น Netlify, Vercel หรือ Firebase Hosting (อบรม 4 วัน วันละ 6 ชั่วโมง รวม 24 ชั่วโมง ระดับ Advanced)

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

ใช้ TypeScript กับ Vue 3 ได้ครบทั้ง Props, Emits, Model, Slot, provide/inject และ Generic Component
ตั้งค่าและใช้ Vite ขั้นสูง รวมถึงย้ายโปรเจกต์เดิมจาก Vue CLI
เข้าใจ Reactivity เชิงลึกและออกแบบ Composable ที่ใช้ซ้ำได้
ใช้ VueUse แก้งานที่พบบ่อยได้รวดเร็ว
จัดการ State ขนาดใหญ่ด้วย Pinia 4 พร้อม Plugin และการทดสอบ
สร้างหน้าจอด้วย Vuetify 4 และ PrimeVue และจัดสไตล์ด้วยเทคนิคปัจจุบัน
เชื่อม Firebase และ CKEditor 5 กับแอป Vue
ทดสอบ ปรับ Performance และ Deploy แอปขึ้นใช้งานจริง

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

Front-end Developer ที่เขียน Vue 3 ได้แล้วและต้องการยกระดับไปสู่งานขนาดใหญ่
ผู้ที่ผ่านหลักสูตร Basic Vue.js 3 และต้องการต่อยอด
ทีมที่ดูแลแอป Vue เดิมและต้องการย้ายมาใช้ TypeScript, Vite และ Pinia
อาจารย์ วิทยากร และนักไอทีที่ต้องการแนวทางพัฒนา Vue แบบปัจจุบัน

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

เขียน HTML, CSS และ JavaScript สมัยใหม่ได้ เช่น Module, async/await และ Array Method
เขียน Vue 3 แบบ script setup ได้ หรือผ่านหลักสูตร Basic Vue.js 3
ใช้งาน Vue Router และเรียก REST API ได้เบื้องต้น
ใช้ Terminal, npm และ Git ได้

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

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

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Advanced Vue.JS 3 อบรม 4 วัน วันละ 6 ชั่วโมง รวม 24 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ระดับ Advanced ยังคงแกนเดิมคือ Vue 3 ร่วมกับ TypeScript, Vite ขั้นสูง, Composition API ขั้นสูง, VueUse, Pinia, Vuetify, Firebase, การจัดสไตล์, CKEditor 5 และการ Deploy โดยอัปเดตเป็น Vue 3.5 แบบ script setup, Pinia 4,

Vuetify 4, Firebase SDK แบบ Modular และ CKEditor 5 รุ่นปัจจุบัน เปลี่ยนจาก Ant Design Vue เป็น PrimeVue และจาก Styled Components เป็น CSS Modules กับ Tailwind CSS พร้อมเพิ่มการทดสอบด้วย Vitest และ Performance หลักสูตรนี้ต่อยอดจาก Basic Vue.js 3 และเน้น Vue ฝั่ง Client ต่างจาก Nuxt Advanced ที่เน้น SSR ผู้เรียนได้ Lab Guide และ Template โปรเจกต์ Vue กับ TypeScript กลับไปใช้งานต่อ

Day 1 Vue 3 ร่วมกับ TypeScript และ Vite

Section 1: Lab: เตรียมโปรเจกต์ Vue กับ TypeScript

สร้างโปรเจกต์ด้วย npm create vue@latest พร้อม TypeScript, Router, Pinia และ Vitest
ตั้งค่า VS Code, ส่วนขยาย Vue (Official) และตรวจ Type ด้วย vue-tsc
ESLint และ Prettier สำหรับมาตรฐานโค้ดของทีม
Lab: โครงโปรเจกต์ที่ใช้ต่อตลอดหลักสูตร

Section 2: Lab: TypeScript ใน Component

กำหนด Type ให้ defineProps พร้อมค่าเริ่มต้นและ Reactive Props Destructure
defineEmits แบบมี Type และ defineModel สำหรับ v-model
defineSlots สำหรับ Slot ที่มี Type
Lab: Component ตารางข้อมูลที่ตรวจ Type ครบทุกส่วน

Section 3: TypeScript ขั้นสูงกับ Vue

Type ของ ref, reactive, computed และ Event Handler
Template Ref ด้วย useTemplateRef และ provide/inject ด้วย InjectionKey
Generic Component ด้วย generic="T"
ขยาย Global Property และ Refactor โค้ดเดิมด้วย TypeScript

Section 4: Lab: Vite ขั้นสูง

โครงสร้างโปรเจกต์และไฟล์ vite.config.ts
Environment Variable ด้วย import.meta.env และ Path Alias
ตั้ง Proxy ของ Dev Server เพื่อเรียก API โดยไม่ติด CORS
Build สำหรับ Production, Code Splitting และวิเคราะห์ขนาด Bundle

Section 5: Lab: ย้ายโปรเจกต์เดิมมาใช้ Vite

ย้ายการตั้งค่าจาก vue.config.js ของ Vue CLI
ปรับ Options API เป็น script setup ทีละส่วน
ภาพรวม Vue 3.6 และ Vapor Mode ที่กำลังจะมา
Lab: ย้ายแอปตัวอย่างจาก Vue CLI มาใช้ Vite กับ TypeScript

Day 2 Composition API เชิงลึกและ VueUse

Section 6: Reactivity เชิงลึก

ref กับ reactive ต่างกันอย่างไร และ shallowRef สำหรับข้อมูลขนาดใหญ่
toRef, toRefs, toValue และ readonly
watch แบบ once และ deep ตามระดับ, watchEffect และ onWatcherCleanup
Lifecycle Hook และ effectScope

Section 7: Lab: ออกแบบ Composable ที่ใช้ซ้ำได้

รับค่าแบบ MaybeRefOrGetter และอ่านด้วย toValue
จัดการสถานะ Loading, Error และการยกเลิกคำขอ
ล้าง Event และ Timer เมื่อ Component ถูกทำลาย
Lab: usePosts ที่ดึงข้อมูล แบ่งหน้า และค้นหาได้

Section 8: Lab: VueUse สำหรับ Browser และ Sensors

useTitle, useClipboard และธีมด้วย useDark กับ useColorMode
คีย์บอร์ด เมาส์ และการสัมผัสด้วย useMagicKeys และ usePointer
useScroll, useElementVisibility และ useMediaQuery
Lab: แถบเครื่องมือที่รองรับคีย์ลัดและ Dark Mode

Section 9: Lab: VueUse สำหรับ Animation, State และ Utilities

useIntervalFn, useRafFn และ useTransition
useRefHistory สำหรับ Undo และ useStorage สำหรับเก็บข้อมูลถาวร
useFetch, computedAsync และ refAutoReset
Lab: ฟอร์มแก้ไขข้อมูลที่ Undo ได้และบันทึกร่างอัตโนมัติ

Section 10: Lab: Component ขั้นสูง

Renderless Component และ Scoped Slot
Custom Directive สำหรับงานที่ใช้ซ้ำ
Teleport, KeepAlive และ Async Component
Lab: Component รายการข้อมูลที่ปรับรูปแบบการแสดงผลได้

Day 3 State, UI Library และการจัดสไตล์

Section 11: Pinia 4 ขั้นสูง

Setup Store เทียบกับ Option Store และการใช้ storeToRefs
Store ที่เรียกใช้ Store อื่น และการ Reset State
ติดตามการเปลี่ยนแปลงด้วย $subscribe และ $onAction
Plugin ของ Pinia, HMR และ Timeline ใน Vue DevTools

Section 12: Lab: ตะกร้าสินค้าด้วย Pinia

Store ของสินค้าและตะกร้าพร้อม Action แบบ async
Getter และ Getter ที่รับพารามิเตอร์
เก็บตะกร้าไว้ใน Local Storage ด้วย Plugin
Lab: ตะกร้าสินค้าที่ใช้ได้ทั้ง script setup และ Options API

Section 13: Lab: สร้างหน้าจอด้วย Vuetify 4

ติดตั้ง Vuetify 4 ในโปรเจกต์ Vite
Layout, Grid System และ Component ที่ใช้บ่อย
ฟอร์มพร้อมการตรวจข้อมูล และ Data Table
Lab: หน้า Admin สำหรับจัดการสินค้า

Section 14: Lab: PrimeVue และการเลือก UI Library

ติดตั้ง PrimeVue และเลือก Theme
Component ฟอร์ม ตาราง Dialog และ Toast
เกณฑ์เลือก UI Library: การดูแลรักษา Accessibility และขนาด
Lab: หน้าค้นหาและกรองสินค้าด้วย PrimeVue

Section 15: Lab: การจัดสไตล์สมัยใหม่ใน Vue

Scoped CSS, CSS Modules และ :deep()
สไตล์ที่เปลี่ยนตาม State ด้วย v-bind() ใน CSS
Tailwind CSS ร่วมกับ Vite และ Component ของ Vue
Lab: ชุดปุ่มและการ์ดที่ปรับสีตาม Props

Day 4 Backend, การทดสอบ และ Production

Section 16: Lab: Vue กับ Firebase

สร้างโปรเจกต์ Firebase และติดตั้ง Firebase SDK แบบ Modular
อ่าน เขียน และติดตามข้อมูลแบบ Real-time ใน Firestore
Firebase Authentication และ Auth Store ใน Pinia
Security Rules สำหรับป้องกันข้อมูล

Section 17: Lab: Rich Text Editor ด้วย CKEditor 5

ติดตั้ง @ckeditor/ckeditor5-vue และแพ็กเกจ ckeditor5
ตั้งค่า License Key, Plugin และ Toolbar
ใช้ v-model, Event และภาษาไทยในหน้าจอ Editor
Lab: หน้าเขียนบทความที่บันทึกลง Firestore

Section 18: Lab: ทดสอบด้วย Vitest

ทดสอบ Component ด้วย Vitest และ Vue Test Utils
ทดสอบ Composable และ Store ด้วย createTestingPinia
จำลอง API และภาพรวม End-to-End Test
Lab: ชุดทดสอบของตะกร้าสินค้า

Section 19: Performance และ Production Build

Lazy Loading ของ Route และ Component
รายการข้อมูลขนาดใหญ่ด้วย shallowRef และ v-memo
ตรวจด้วย Vue DevTools, Performance Panel และ Lighthouse
ตั้งค่า Environment สำหรับ Production

Section 20: Workshop: โปรเจกต์ปิดท้ายและ Deploy

รวม TypeScript, Pinia, UI Library และ Firebase ในแอปเดียว
Deploy ขึ้น Netlify, Vercel หรือ Firebase Hosting
ตรวจโค้ดและรันทดสอบอัตโนมัติด้วย GitHub Actions
Workshop: นำเสนอผลงานและแนวทางต่อยอด

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

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

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

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

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

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

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

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

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

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

ref กับ reactive ใน Vue 3 ต่างกันอย่างไร ควรใช้ตอนไหน

ref ใช้ได้กับค่าทุกชนิด อ่านและแก้ค่าผ่าน .value ในสคริปต์ และส่งต่อหรือ Destructure ได้โดยไม่เสีย Reactivity ส่วน reactive ใช้ได้กับ Object, Array, Map และ Set เท่านั้น เข้าถึงค่าได้ตรง ๆ แต่ถ้า Destructure หรือแทนที่ทั้งก้อนจะเสีย Reactivity แนวทางที่ทีม Vue แนะนำคือใช้ ref เป็นหลัก และใช้ shallowRef กับข้อมูลขนาดใหญ่ที่แทนที่ทั้งก้อน

Composable ใน Vue 3 คืออะไร สร้างอย่างไร

Composable คือฟังก์ชันที่ใช้ Composition API รวบรวมตรรกะที่มี State ไว้ใช้ซ้ำหลาย Component ตั้งชื่อขึ้นต้นด้วย use เช่น useCart หรือ usePosts ภายในประกาศ ref, computed และ watch แล้วคืนค่าออกมา ควรรับค่าแบบ MaybeRefOrGetter แล้วอ่านด้วย toValue เพื่อให้รับได้ทั้งค่าปกติ ref และ getter และล้าง Event หรือ Timer เมื่อ Component ถูกทำลาย VueUse เป็นตัวอย่างชุด Composable ที่ใช้งานได้ทันที

ใช้ TypeScript กำหนดชนิดของ Props และ Events ใน Vue 3 ทำอย่างไร

ใน script setup lang="ts" ส่ง Type ให้ defineProps ได้โดยตรง และกำหนดค่าเริ่มต้นผ่าน Reactive Props Destructure ส่วน Event ใช้ defineEmits แบบระบุชื่อ Event และชนิดของข้อมูลที่ส่ง ถ้าต้องการ v-model บน Component ใช้ defineModel ที่มี Type ได้เลย และใช้ defineSlots กับ Generic Component เมื่อ Component ต้องรองรับข้อมูลหลายชนิด จากนั้นตรวจทั้งโปรเจกต์ด้วย vue-tsc

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

เหมาะกับ Front-end Developer ที่เขียน Vue 3 ได้แล้ว ทีมที่ดูแลแอป Vue เดิมและต้องการย้ายมาใช้ TypeScript, Vite และ Pinia รวมถึงอาจารย์และนักไอทีที่ต้องการแนวทางพัฒนาแบบปัจจุบัน ควรเขียน JavaScript สมัยใหม่และ Vue 3 แบบ script setup ได้ ใช้ Vue Router และเรียก API ได้เบื้องต้น ผู้ที่ยังไม่เคยเขียน Vue ควรเริ่มจาก Basic Vue.js 3

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

วางโครงสร้างโปรเจกต์ Vue ด้วย TypeScript และ Vite ให้ทีมได้ เขียน Composable ที่ใช้ซ้ำได้ จัดการ State ด้วย Pinia 4 สร้างหน้าจอด้วย Vuetify 4 หรือ PrimeVue เชื่อม Firebase และ CKEditor 5 เขียนชุดทดสอบด้วย Vitest ปรับ Performance และ Deploy แอปขึ้น Netlify, Vercel หรือ Firebase Hosting ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion)

จัดอบรมหลักสูตร Advanced Vue.js 3 ให้ทีมในองค์กรได้ไหม

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