{"componentChunkName":"component---gatsby-theme-courses-src-templates-lesson-js","path":"/courses/fullstack-nuxtjs-classroom/lessons/fullstack-nuxtjs-classroom-video-navigation","result":{"data":{"course":{"slug":"fullstack-nuxtjs-classroom","name":"คอร์ส Nuxt.js 3 พัฒนาเว็บและ API ด้วย Vue.js 3, Nuxt.js, TypeScript, Prisma และ Pinia","excerpt":"สอนการใช้ Nuxt.js 3 เพื่อสร้างเว็บที่สมบูรณ์ภายใต้โค้ดชุดเดียว ผ่าน Nuxt, Nuxt Content, TypeScript, Prisma, Pinia, Tailwind และอื่น ๆ","courseInsideNote":null,"units":[{"title":"Resources","lessons":[{"title":"วิธีการเข้าอบรม","type":"document","slug":"fullstack-nuxtjs-classroom-how-to-join-course","hasCode":null,"forLive":true},{"title":"การใช้งานคอร์สและซอร์จโค้ด","type":"document","slug":"fullstack-react-nextjs-api-classroom-how-to-use-this-course","hasCode":null,"forLive":false},{"title":"การขอ Certification","type":"document","slug":"fullstack-react-nextjs-api-classroom-certification","hasCode":null,"forLive":true}]},{"title":"Nuxt Demo","lessons":[{"title":"การติดตั้ง Nuxt และใช้งาน Antfu","type":"document","slug":"fullstack-nuxtjs-classroom-nuxt-installation-and-antfu","hasCode":null,"forLive":null},{"title":"แบบฝึกหัดเรื่อง Nuxt Demo","type":"document","slug":"fullstack-nuxtjs-classroom-nuxt-demo-exercise","hasCode":null,"forLive":null}]},{"title":"Modern JavaScript","lessons":[{"title":"Recap JavaScript and TypeScript","type":"document","slug":"fullstack-nuxtjs-classroom-modern-js","hasCode":null,"forLive":null},{"title":"Nuxt Tech Stack","type":"document","slug":"fullstack-nuxtjs-classroom-nuxt-tech-stack","hasCode":null,"forLive":null},{"title":"การตั้งค่า Git Bash บน Integrated Terminal","type":"document","slug":"fullstack-nuxtjs-classroom-git-bash-integrated-terminal","hasCode":null,"forLive":null},{"title":"แบบฝึกหัดเรื่อง let/const, Arrow Functions, Spread and Destructuring","type":"document","slug":"fullstack-nuxtjs-classroom-js-exam-let-const-arrow-fn-spread-destructuring","hasCode":null,"forLive":true},{"title":"สไลด์ Functional Programming","type":"document","slug":"fullstack-nuxtjs-classroom-functional-js","hasCode":null,"forLive":null},{"title":"แบบฝึกหัดเรื่อง Map, Filter และ Find","type":"document","slug":"fullstack-nuxtjs-classroom-js-exam-map-filter-find","hasCode":null,"forLive":true},{"title":"แบบฝึกหัดเรื่อง ESModule","type":"document","slug":"fullstack-nuxtjs-classroom-js-exam-esmodule","hasCode":null,"forLive":true},{"title":"แบบทดสอบ JavaScript","type":"document","slug":"fullstack-nuxtjs-classroom-js-exam-2","hasCode":null,"forLive":true},{"title":"แบบฝึกหัดเรื่องการใช้งาน TypeScript","type":"document","slug":"fullstack-nuxtjs-classroom-js-exam-typescript","hasCode":null,"forLive":true}]},{"title":"Vue Fundamentals","lessons":[{"title":"Vue Template","type":"document","slug":"fullstack-nuxtjs-classroom-nuxt-vue-template","hasCode":null,"forLive":null},{"title":"แบบฝึกหัดเรื่อง Vue Template","type":"document","slug":"fullstack-nuxtjs-classroom-nuxt-vue-template-exercise","hasCode":null,"forLive":null},{"title":"Vue Reactivity","type":"document","slug":"fullstack-nuxtjs-classroom-nuxt-vue-reactivity","hasCode":null,"forLive":null},{"title":"แบบฝึกหัดเรื่อง Vue Reactivity","type":"document","slug":"fullstack-nuxtjs-classroom-nuxt-vue-reactivity-exercise","hasCode":null,"forLive":null},{"title":"Vue Components","type":"document","slug":"fullstack-nuxtjs-classroom-nuxt-vue-components","hasCode":null,"forLive":null},{"title":"แบบฝึกหัดเรื่อง Vue Components","type":"document","slug":"fullstack-nuxtjs-classroom-nuxt-vue-components-exercise","hasCode":null,"forLive":null}]},{"title":"Vue Fundamentals","lessons":[{"title":"Nuxt.js Routing","type":"document","slug":"fullstack-nuxtjs-classroom-nuxt-nuxt-routing","hasCode":null,"forLive":null}]},{"title":"Database Management","lessons":[{"title":"Prisma Schema","type":"document","slug":"fullstack-nuxtjs-classroom-prisma-schema","hasCode":null,"forLive":null},{"title":"Data Management Workflow สำหรับ Development","type":"document","slug":"fullstack-nuxtjs-classroom-db-workflow-for-dev","hasCode":null,"forLive":null},{"title":"Database Seeding","type":"document","slug":"fullstack-nuxtjs-classroom-db-seeding","hasCode":null,"forLive":null},{"title":"Migration","type":"document","slug":"fullstack-nuxtjs-classroom-db-migration","hasCode":null,"forLive":null}]},{"title":"Nuxt Rendering","lessons":[{"title":"สไลด์ Nuxt Rendering","type":"document","slug":"fullstack-nuxtjs-classroom-nuxt-rendering-slide","hasCode":null,"forLive":null}]},{"title":"Pinia","lessons":[{"title":"สไลด์ Pinia","type":"document","slug":"fullstack-nuxtjs-classroom-nuxt-rendering-slide","hasCode":null,"forLive":null}]},{"title":"Deployment","lessons":[{"title":"การเตรียมโปรเจคสำหรับการ Deploy","type":"document","slug":"fullstack-nuxtjs-classroom-deployment","hasCode":null,"forLive":false}]},{"title":"บันทึกการสอน","lessons":[{"title":"1. Nuxt.js Stack","type":"video","slug":"fullstack-nuxtjs-classroom-video-nuxtjs-stack","hasCode":null,"forLive":null},{"title":"2. Setup Tools","type":"video","slug":"fullstack-nuxtjs-classroom-video-setup-tools","hasCode":null,"forLive":null},{"title":"3. Setup Nuxt.js","type":"video","slug":"fullstack-nuxtjs-classroom-video-setup-nextjs","hasCode":null,"forLive":null},{"title":"4. Nuxt.js Demo","type":"video","slug":"fullstack-nuxtjs-classroom-video-nuxtjs-demo","hasCode":true,"forLive":null},{"title":"5. Recap JavaScript","type":"video","slug":"fullstack-nuxtjs-classroom-video-recap-javascript","hasCode":null,"forLive":null},{"title":"6. Recap TypeScript","type":"video","slug":"fullstack-nuxtjs-classroom-video-recap-typescript","hasCode":null,"forLive":null},{"title":"7. Vue Template","type":"video","slug":"fullstack-nuxtjs-classroom-video-vue-template","hasCode":true,"forLive":null},{"title":"8. แบบฝึกหัดเรื่อง Nuxt Demo","type":"video","slug":"fullstack-nuxtjs-classroom-video-nuxt-demo-exercise","hasCode":null,"forLive":true},{"title":"9. แบบฝึกหัดเรื่อง Vue Template","type":"video","slug":"fullstack-nuxtjs-classroom-video-vue-template-exercise","hasCode":null,"forLive":true},{"title":"10. Reactivity","type":"video","slug":"fullstack-nuxtjs-classroom-video-reactivity","hasCode":true,"forLive":null},{"title":"11. Composables","type":"video","slug":"fullstack-nuxtjs-classroom-video-composables","hasCode":true,"forLive":null},{"title":"12. แบบฝึกหัดเรื่อง Reactivity","type":"video","slug":"fullstack-nuxtjs-classroom-video-reactivity-exercise","hasCode":null,"forLive":null},{"title":"13. Components","type":"video","slug":"fullstack-nuxtjs-classroom-video-components","hasCode":true,"forLive":null},{"title":"14. v-model","type":"video","slug":"fullstack-nuxtjs-classroom-video-v-model","hasCode":true,"forLive":null},{"title":"15. แบบฝึกหัดเรื่อง Components","type":"video","slug":"fullstack-nuxtjs-classroom-video-components-exercise","hasCode":null,"forLive":true},{"title":"16. Layouts","type":"video","slug":"fullstack-nuxtjs-classroom-video-layouts","hasCode":true,"forLive":null},{"title":"17. Navigation","type":"video","slug":"fullstack-nuxtjs-classroom-video-navigation","hasCode":null,"forLive":null},{"title":"18. ทบทวนการใช้งาน RESTful API","type":"video","slug":"fullstack-nuxtjs-classroom-video-recap-restful-api","hasCode":null,"forLive":null},{"title":"19. API Routes","type":"video","slug":"fullstack-nuxtjs-classroom-video-api-routes","hasCode":true,"forLive":null},{"title":"20. Nuxt DevTools","type":"video","slug":"fullstack-nuxtjs-classroom-video-nuxt-devtools","hasCode":null,"forLive":null},{"title":"21. Prisma Schema","type":"video","slug":"fullstack-nuxtjs-classroom-video-prisma-schema","hasCode":true,"forLive":null},{"title":"22. Database Seeding","type":"video","slug":"fullstack-nuxtjs-classroom-video-database-seeding","hasCode":true,"forLive":null},{"title":"23. Migration","type":"video","slug":"fullstack-nuxtjs-classroom-video-migration","hasCode":true,"forLive":null},{"title":"24. CRUD","type":"video","slug":"fullstack-nuxtjs-classroom-video-crud","hasCode":true,"forLive":null},{"title":"25. Tailwind CSS and Nuxt UI","type":"video","slug":"fullstack-nuxtjs-classroom-video-tailwind-css-and-nuxt-ui","hasCode":true,"forLive":null},{"title":"26. Rendering Modes","type":"video","slug":"fullstack-nuxtjs-classroom-video-rendering-modes","hasCode":true,"forLive":null},{"title":"27. Form Management","type":"video","slug":"fullstack-nuxtjs-classroom-video-form-management","hasCode":true,"forLive":null},{"title":"28. Image Uploader","type":"video","slug":"fullstack-nuxtjs-classroom-video-image-uploader","hasCode":true,"forLive":null},{"title":"29. Fetch API","type":"video","slug":"fullstack-nuxtjs-classroom-video-fetch-api","hasCode":true,"forLive":null},{"title":"30. Authentication และ Authorization","type":"video","slug":"fullstack-nuxtjs-classroom-video-authentication-and-authorization","hasCode":true,"forLive":null},{"title":"31. Permission Middleware","type":"video","slug":"fullstack-nuxtjs-classroom-video-permission-middleware","hasCode":true,"forLive":null},{"title":"32. Pinia","type":"video","slug":"fullstack-nuxtjs-classroom-video-pinia","hasCode":true,"forLive":null},{"title":"33. SEO","type":"video","slug":"fullstack-nuxtjs-classroom-video-seo","hasCode":true,"forLive":null},{"title":"34. Nuxt Content","type":"video","slug":"fullstack-nuxtjs-classroom-video-nuxt-content","hasCode":true,"forLive":null},{"title":"35. Deployment","type":"video","slug":"fullstack-nuxtjs-classroom-video-deployment","hasCode":true,"forLive":null}]}],"coverImage":{"childImageSharp":{"fixed":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACl0lEQVQoz02TS4/bdBTFvWKJNHTaaV7+2/EziRPn4djxI2mcR2fSziQz7bRVO8xAkaCVKraIDRvEkg2Ib8ACiW+B+GA/blIJWBzd67+vj33OPda8SY43n1LdZDQ7fSwnwGz6KN3GNBwMw6WhBLqLLnV/bcg9QznYjnuYMU2HZvNj1drTHOvHL/nkhx1Hr0saVZu6DOu6ReVER3U6pOuYdDEiW45whqGQ2/+SWraLZX0k3EOrPWgQl3Ne3N2Rn50xK09ZLjdcXl5T5CXTRwvmqxWzxYJXn99wvr0SgtaBbE+q/g8503Q7YJ6vuLm+ZXfxkt31DevTp5yWQrp9LmfPeDRdkSYzrnYvmMQF9z97SK1moESuUv8RGnULzTK7nFwt+fTbLfe/eMLR7YqTQYfjs4Sjy4zjx2PqjiNWmBzfqzBOCn7+5VeitEANepi9nshuYeoO9ShEs8VkfZbw8GZNdTelVsboYZeK9NXpGGMVM8x6Is+lXlGUm3P+/PsvnmwuGCU5cZwz6ieYfpuTTYqWlyFFFhB1PHxlYVSaKPl044Fx6A/Y+yXyKhWD+XTO99+8oR8nsqQ1s2JBHElCvA56HqF5vk9ShMTTLkHYwvddiYNH0xKofRTcgzeW6aFEdjqe8OHVOWG7zyiMiUcThgNR0Y1wgp4spSExkcGO38URqHBwIHG8AFse9iWbnWKG2xa/4gxTarUl0XHb1AU1P6BuCEc7OCjTHDE0CCPGq1PsxZx77y4wyhyViJ9f/YRRFPz2x+8s797y9rsV8bMSQ4ibWUpteyk4x5g/pnH7HuW20ExZiuO0CQZjlLytEQ3QvRbt/pjJ9g1eMOD263cMJxKbbSZbjgjTGb1xSi+bSV/QHk4YrZ8e/qJ/ACTAXCc4pbdxAAAAAElFTkSuQmCC","width":730,"height":415,"src":"/static/62c30b4e000f0f0aa16af83f7bdd5e31/b012f/feature-image.png","srcSet":"/static/62c30b4e000f0f0aa16af83f7bdd5e31/b012f/feature-image.png 1x,\n/static/62c30b4e000f0f0aa16af83f7bdd5e31/edcac/feature-image.png 1.5x,\n/static/62c30b4e000f0f0aa16af83f7bdd5e31/c93a6/feature-image.png 2x","srcWebp":"/static/62c30b4e000f0f0aa16af83f7bdd5e31/738cc/feature-image.webp","srcSetWebp":"/static/62c30b4e000f0f0aa16af83f7bdd5e31/738cc/feature-image.webp 1x,\n/static/62c30b4e000f0f0aa16af83f7bdd5e31/41b58/feature-image.webp 1.5x,\n/static/62c30b4e000f0f0aa16af83f7bdd5e31/7f29b/feature-image.webp 2x"}}}}},"pageContext":{"courseSlug":"fullstack-nuxtjs-classroom","lesson":{"title":"17. Navigation","slug":"fullstack-nuxtjs-classroom-video-navigation","desc":"Navigation","time":"19.26","type":"video","hasCode":null,"forLive":null}}},"staticQueryHashes":["206548925","2199894714","2876447390","2876447390","3640134886","372033979","4000121635","4000121635","480822984"]}