ทำไมเราต้องใช้ Nuxt เมื่อมี vue อยู่แล้ว ? (มารู้จักกับ Nuxt กัน)
ฝัง
- เผยแพร่เมื่อ 3 ก.ค. 2024
- ☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
/ @mikelopster
ลองไมค์ สัปดาห์นี้เราจะพามาทำความรู้จัก Nuxt กันว่ามันคืออะไร มีความแตกต่างกับ Vue ยังไงบ้าง และเคสแบบไหนควรใช้ Nuxt บ้าง มารู้จักกันในลองไมค์วันนี้ครับ
เนื้อหาที่เราจะพูดถึงเราจะเล่าถึง
- Nuxt คืออะไร ? เมื่อเทียบกับ Vue แล้ว Nuxt มีจุดที่แตกต่างกับ Vue ยังไงบ้าง
- มาลองให้เห็นภาพการจัดการ auto import, routing ของ Nuxt
- และเรามาลอง deploy ขึ้น vercel กันเพื่อให้เห็นภาพว่ามันสามารถเอาไป deploy ยังไงได้บ้าง
- การทำ SSR และเล่าถึงการดึงข้อมูลผ่าน SEO bot
- แนะนำ use case เพิ่มเติมว่า เคสไหนควรใช้ Nuxt, เคสไหนควรใช้ Vue (และตอบคำถามจากที่มีคนส่งเข้ามา)
หัวข้อ
00:00 แนะนำ Session ก่อนว่าจะเล่าอะไรบ้าง
01:08 Nuxt คืออะไร ? ข้อดีของ Nuxt มีอะไรบ้าง
05:17 ภาพใหญ่ความแตกต่างระหว่าง Nuxt และ Vue
10:53 มาเริ่ม code project Nuxt กัน
13:20 ทำดึง Todo List ผ่าน Nuxt (เล่น CRUD API)
25:29 เพิ่มอีก 1 หน้าและส่ง parameter (Router)
29:01 Deploy ขึ้น Vercal
33:25 การสร้าง component ใน Nuxt
35:02 แนวทางการทำ composable ของ Nuxt
35:51 แนวทาง SEO และ SSR ของ Nuxt
36:20 แนวทางการทำ Meta tag และ useHead จาก API
39:08 มาดูเรื่อง SSR ผ่าน useFetch lazy กัน (เมื่อเทียบกับ Vue)
45:08 แนวทางการทำ Authentication
47:20 สรุปเรื่อง Nuxt และ Vue ว่าควรใช้อะไรกัน
อ่านเพิ่มเติมได้ที่
mikelopster.dev/posts/nuxt-vs...
ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page: / mikelopster.dev กันได้เลย
Enjoy ครับ 😘
พิกัดของด้านหลัง : shope.ee/8A54c8cfkf - วิทยาศาสตร์และเทคโนโลยี
![[Full Episode] MasterChef Junior Thailand มาสเตอร์เชฟ จูเนียร์ ประเทศไทย Season 3 Episode 4](http://i.ytimg.com/vi/e7Oqqo90x_w/mqdefault.jpg)
อธิบายเข้าใจง่ายมากครับ👍👍
ทำต่อไปนะครับ เข้าใจหลาย ๆ อย่างขึ้นมากเลย 🙇♀
เราจะไม่หยุดทำ ถ้าทุกคนไม่หยุดดูครับ 😂
ติดตามทุกคลิปครับ
ขอบคุณมากนะครับ 😁
รอครับ
สู้ๆน่ะครับ FC จากฝั่งลาวครับ. อยากเห็น solid js บ่าง😅😅😅
ขอบคุณมากเลย solid js เดี๋ยวผมขอลองก่อน ยังไม่มีโอกาสได้ลองเลยย 😅
ขอบคุณมากครับ เข้าใจง่ายดี ผมเลิก dev ไป ประมาณปีครึ่ง ตอนนี้กำลังกลับมาทบทวน อยากให้พาทำ workshop Nuxt3 ต่อ จาก VF Masterclass ครับ
ต่อ bun หน่อยครับ
👋👋👋 Thank you. nice clip.
อยากให้พี่ทำคอร์ส masterclass ของ next + prisma บ้างครับ
เดี๋ยวผมเก็บเป็นไอเดียไว้ก่อนน้า น่าสนใจครับ 😁
ต่อ next.js หน่อยครับ
สอน next.js , tailwind css , mysql login หน่อยงับ
พี่ครับถ้าเป็นไปได้หลังจบซีรีย์VF Masterclass ทำซีรีย์nuxt ต่อเลยนะครับแล้วก็ผมรอbroadcast typescript พี่อยู่นะครับ
เดี๋ยวผมขอนำไปชั่งน้ำหนักก่อนน้า ตอนนี้มีอีกสำนักอย่าง next อยากให้ผมทำเหมือนกัน 😆
สอน implements tanstack query ด้วยได้ไหมครับ
ผมยังไม่เคยลองใช้เลย เดี๋ยวผมขอไปลองก่อน ถ้ามีเกร็ดอะไรน่าสนใจ ไว้ผมจะหยิบมาเล่าให้ฟังนะครับ 😁
🎉🎉🎉
ขอdeploy full stack nextJsหน่อยครับพี่
ถ้า deploy nextjs เลย สามารถใช้วิธีเดียวกันกับ nuxt (ตามในคลิปนี้) deploy ขึ้นที่ vercal ได้เลยนะครับ
สนใจ bun ครับรอฟังๆๆ🎉
ฟังจากหัวข้อ Elysia ในช่องก่อนได้น้าา
แนะนำทำ Schema หน้าเว็บหน่อยครับ มีวิธีไหน ใช้ lib อะไร
ตัวที่ผมชอบเลยของ javascript คือ yup ครับ ใช้สำหรับประกาศ schema และทำ validation ได้ (ถ้าเป็น typescript จะแนะนำเป็น zod เพิ่มเติมอีกตัวนะครับ) 😁
อธิบาย ความแตกต่าง ของ ssr vs. ssg vs. isr vs. csr หน่อยครับ ควรเลือกใช้อะไรยัง
ok เดี๋ยวผมจะเก็บมาเล่าเรื่องนี้ละเอียดอีกที ผมจะให้ในแง่ use case ไว้ก่อน เผื่ออยากหาข้อมูลเพิ่มเติมก่อน ปกติผมจะใช้ตามนี้นะครับ
- SSR ผมจะใช้กับเว็บที่ต้องการ SEO และ content เปลี่ยนแปลงตลอดเวลา เช่น E commerce, Blog
- SSG ผมจะใช้กับเว็บที่ต้องการ SEO และ content เปลี่ยนไม่บ่อย (คือสร้างมาครั้งเดียวและใช้ไปยาวๆ) เช่น Landing page, Campaign page (ให้แค่มาทำกิจกรรม)
- CSR ผมจะใช้กับเว็บที่ไม่เน้น SEO และการจัดการส่วนใหญ่อยู่กับฝั่ง Server เช่น CMS, POS
ส่วน ISR ผมขอไปเก็บข้อมูลก่อน ผมยังไม่ได้มีประสบการณ์ใช้งาน ไว้เดี๋ยวจะเก็บมาเล่าพร้อมกันทีเดียวนะครับ 😁
@@mikelopster พอเข้าใจขึ้น เลยครับ ขอบคุณมากครับ ติดตามครับ
Bun ใครที่ code บน windows อาจจะยุ่งยากนิดนึง ต้องลง bun และ เขียน code บน WSL แทนนะครับ
มีโอกาสผมอยากไปลองมากเลย คนรอบตัวผมพูดถึงกันเยอะมากเลย 😂
Nuxt กับ nuxt js เหมือนกันไม่ครับพี่
เหมือนกันครับ 😁
vercel คือสิ่งนึงที่ในชีวิตขาดมันไม่ได้ค่ะตอนนี้ 😂