Advanced Vue.JS 3 ขั้นสูง

Section 1: การทำงานกับ Vue 3 ร่วมกับ TypeScript                        

• Introduction to TypeScript with Vue.js 3                                 
• Bootstrap a Vue.js and TypeScript Project                             
• Setup VS Code for TypeScript and Vue                                 
• TypeScript in Vue Components                                  
• Typing Reactive Data                         
• Typing Computed Props                                
• Typing Event Handlers                       
• Declaring Component Events                         
• Typing Component Events                             
• Refactoring in TypeScript                               
• Declaring and Typing Component Props                               
• Typing Data Injected via Vue Provide/Inject                           
• Using TypeScript with the Options API in Components                                  
• Augmenting Global Properties and Custom Options                     

Section 2: การทำงานกับ Vue 3 ร่วมกับ Vite 3 ขั้นสูง                        

• Creating a Project with Vite and TypeScript                           
• The project structure in deeep                       
• Networking requests from Vite                       
• Production Builds                               
• Using Vite in Existing Vue Projects                             
• Migrating vue.config.js                       

Section 3: การใช้งาน Vue Composition API ขั้นสูง                          

• Introduction to the Vue.js 3 Composition API                         
• Set up a Local Environment with Vite                         
• Vue Composition API Setup Method                          
• The Setup Method's Parameters: props and context                         
• Reactive Primitives with Refs                          
• Reactive Data with the Composition API                                
• Refs vs Reactive With the Vue 3 Composition API                             
• Computed Properties in the Composition API                        
• Using Watch with the Composition API                                  
• The Composition API watchEffect Function                           
• Using provide / inject with the Composition API                                 
• Lifecycle hooks and the Composition API                              
• Script Setup                           
• Creating a usePost Composable                            

Section 4: การประยุกต์ใช้งาน VueUse Library                     

• Intro to VueUse                                  
• Browser - Reactive Browser Wrappers in VueUse - useTitle                         
• Browser - Reactive Browser Wrappers in Vueuse - useClipboard
• Browser - Theming with VueUse useDark and useColorMode
• Sensors - The Keyboard and VueUse                        
• Sensors - Device Sensors and VueUse                                 
• Sensors - Mouse & Touch with VueUse                                 
• Sensors - Scroll and VueUse                         
• Sensors - Media and VueUse                    
• Animation - useInterval and useIntervalFn in VueUse                         
• Animation - Create an Animated Sprite with useIntevalFn and useRafFn 
• Animation - Timeouts and VueUse                             
• Animation - Animating Time with VueUse                               
• Animation - Transitions and VueUse                          
• State - Ref History with VueUse                                 
• State - Persistent Storage with VueUse                                 
• VueUse Utilities: useFetch and Reactify                                 
• VueUse Utilities: refAutoReset and useBase64                                  
• VueUse Utilities: computedAsync and logic utils                                
• How to Extend a VueUse Composable                                  
• Vue Components and VueUse                   

Section 5: จัดการ State management ด้วย Pinia                          

• Introduction to Pinia                           
• Install and Setup Up Pinia                              
• Define Your First Pinia Store                           
• Access State from a Pinia Store                                 
• Synchronous and Asynchronous Actions in Pinia                              
• Create a Cart Store and the Pinia Devtools Timeline                          
• An Example of Local Vs Global State                         
• Getters in Pinia                       
• Dynamic Getters and Displaying the Cart Items                                  
• Reset the State in Pinia                                  
• Access Stores from Other Stores                               
• Access Pinia State in the Options API                        
• Access Pinia Getters in the Options API                                 
• Access Pinia Actions in the Options API                                 
• Preserve State with Hot Module Replacement                       
• Subscribing to Actions                    

Section 6: การใช้งาน Vuetify                      

• Introduction Vuetify 3 and Vue 3                                 
• Creating a Vuetify Project                               
• Using Javascript HTML - CSS                        
• Layout                        
• Vuetify Components                           
• Grid System                           
• CSS Classes                          
• Adding Functionality                         

Section 7: การใช้งาน Vue ร่วมกับ Firebase API                   

• Firebase 9 Introduction & Setup                                 
• Introduction to Firebase                                 
• Create a Firebase Project                               
• Create App & Install Firebase                         
• Setup Firestore Database                              
• Connect to Database                         
• Display Notes from Firestore                          
• Firebase 9 Authentication                               
• Firestore Authentication & Auth Store                         
• Listen for Auth Changes & Store User Data                        

Section 8: การออกแบบ UI ด้วย Ant Design                        

• Getting started                       
• Create a new Vue 3 app                                 
• Install ant-design-vue                        
• Ant Design components                                 
• Form handling                        
• Ant Design icons                            

Section 9: การทำงานกับ Styled Components                    

• Installing styled-components in Vue.JS                                  
• Passing the props in styled-components                               
• Dynamic styling with props in Vue.JS                         
• Applying the same style to multiple components                                
• Dynamically changing the type of rendered component                                
• Extending styles                                 

Section 10: การใช้งาน Ckeditor 5 ร่วมกับ Vue.JS 3                       

• Install the CKEditor 5 for Vue.JS                                 
• Using ES6 modules                            
• Using the component locally                          
• Integrating a build from the online builder                              
• Using CKEditor from source                           
• Using the Document editor build                                
• Localization                            
• Component directives                        
• Component events                             

Section 11: การ deployed project ขึ้นใช้งานจริงบน Production                   

• Vue 3 build and config project for production                        
• Deploying A Vue.JS App With Netlify                         
• Deploying A Vue.JS Site with Vercel
• Deploying A Vue.JS App To Firebase Hosting