Nuxt 3 Advanced ขั้นสูง

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

• Section 1: ปรับโครงสร้างโปรเจ็กต์ Nuxt 3 รองรับงานขนาดใหญ่ขึ้น (Scalable project)
• Section 2: การจัดการข้อผิดพลาดฝั่ง Client และฝั่ง Server (Handling Client and Server Errors)
• Section 3: การปรับปรุงฟังก์ชันด้วยการใช้ Utilities
• Section 4: การเขียนเว็บแอพหลายภาษาด้วย Nuxt 3 i18n
• Section 5: การสร้าง API ด้วย Nuxt 3
• Section 6: Nuxt 3 Authentication and Middleware
• Section 7: Nuxt 3 JWT authentication
• Section 8: Nuxt 3 with Data Fetching and HTTP Requests
• Section 9: Nuxt 3 with Prisma in Postgres database
• Section 10: Nuxt 3 State management with Pinia
• Section 11: การ Build และ Deployed project ไปใช้งานจริง

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

Section 1: ปรับโครงสร้างโปรเจ็กต์ Nuxt 3 รองรับงานขนาดใหญ่ขึ้น (Scalable project)

• แนะนำตัวอย่างโครงสร้างโปรเจ็กต์ที่นิยมใช้ในการ Scaleable ได้ในอนาคต
• การสร้าง Layout แบบ Custom
• การเขียนฟังก์ชันการทำงานแยกไว้ใน Composables
• การเรียกใช้งาน Tailwind CSS, Vuetify , Fonts, Icons และอื่นๆ

Section 2: การจัดการข้อผิดพลาดฝั่ง Client และฝั่ง Server (Handling Client and Server Errors)

• การเพิ่มหน้า Page not found (404)
• การใช้ useError Composable
• การทำ Dynamic Rendering Card View
• แสดงข้อผิดพลาดจากฝั่ง Server (Throwing a custom server error)
• แสดงข้อผิดพลาดจากฝั่ง Client (Throwing a Client side error)
• การ Handle Error ด้วย NuxtErrorBoundary

Section 3: การปรับปรุงฟังก์ชันด้วยการใช้ Utilities

• การปรับประสิทธิภาพของรูป (optimizing images) ด้วย NuxtImg
• การใช้ useState Composable
• การใช้งาน Vueuse Module
• การ Forcing Client Side Rendering

Section 4: การเขียนเว็บแอพหลายภาษาด้วย Nuxt 3 i18n

• พื้นฐาน Localization
• การติดตั้ง library @nuxtjs/i18n
• แนวทางการแปลภาษาภายใน Vue components
• External JSON or JS files
• Named formatting
• Pluralization
• Number localization
• Date and time localization
• Nuxt-specific localization
• Search engine optimization (SEO)

Section 5: การสร้าง API ด้วย Nuxt 3

• Create a new nuxt 3 project
• Creating server routes
• Catching all routes
• Creating Middleware and Utilities
• Testing API

Section 6: Nuxt 3 Authentication and Middleware

• แนะนำ Supabase เบื้องต้น
• การสมัครใช้งาน Supabase
• การเชื่อมต่อโปรเจ็กต์ Nuxt กับ Supabase
• เปิดใช้งาน Google Authentication
• Implementing Google OAuth
• Conditionally Rendering UI Based on Auth Status
• Implementing the Logout Functionality
• Protecting Routes With Inline Route Middleware
• Named Middleware
• Global Middleware

Section 7: Nuxt 3 JWT authentication

• Install the required packages
• Configure @nuxtjs/auth module in nuxt.config.js file
• Create login form dispatch nuxtClientInit and pass JWT token
• Use $auth check authenticated and access the user's data
• Use auth middleware to protect routes
• Handle logout method on the $auth object

Section 8: Nuxt 3 with Data Fetching and HTTP Requests

• แนะนำ Server Endpoints API
• Extracting the Path Parameters
• Extracting the Query Parameters
• Fetching the Data From the Client
• Fetch Composable
• Fixing an Issue With Error Handling

Section 9: Nuxt 3 with Prisma in Postgres database

• แนะนำให้รู้จักกับ Prisma ORM
• Installing an ORM with Prisma
• Programmatically Creating Our Tables
• HTTP Verbs
• Fetching Data From the Database
• Deleting Data From the Database
• Adding the Other Two Endpoints
• Complex Filters
• Making a POST Request From the Client
• Making a GET Request From the Client
• Making a DELETE Request From the Client

Section 10: Nuxt 3 State management with Pinia

• Installing Pinia in Nuxt 3
• Add Pinia to your nuxt.config file
• Build your Pinia store
• Bring Pinia in Vue Component

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

• Deploy Nuxt 3 app to Vercel
• Deploy Nuxt 3 app to Netlify
• Deploy Nuxt 3 app to Render
• Deploy Nuxt 3 sites with universal rendering on Azure

ตัวอย่าง Workshop Nuxt 3 with Data Fetching and HTTP Requests (CRUD)

แจกฟรี Nuxt 3 Admin Template