We provide virtual course about Vue.js, Vuex & Router in english. This course takes a thorough look at the progressive Vue.js framework. Vue.js is known as the mostapproachable JavaScript framework while still being performant and maintainable.
Course description:
This course will cover allmajor parts with over 200 examples and many exercises
What you will learn:
• Vue.js architectural concepts
• Creating and testing Vue.js apps
• Essential JavaScript 202X for Vue.js
• Creating reusable components
• Declarative rendering
• Templates with interpolations and directives
• Conditional and list rendering
• Handling properties and events
• Working with forms
• Options API vs Composition API
• Dynamic and Asynchronous components
• Debugging and Developer Tools
• Patterns and Best Practices
• Vue Routing and navigation
• Vue CLI & Vite
• State management with Provide/Inject and Pinia
Course outline:
Introduction:
• What is Vue.js
• Why Vue.js
Module 1 - Language constructs for Vue.js:
• EcmaScript 202X (JavaScript): The relevant features for Vue.js
• Class syntax
• Spread operator
• Arrow functions
• Object destructuring
• More..
• Optional: TypeScript
Module 2 - Data binding:
• Data to View: Content, Attributes.
• View to Data: Events changing data or calling functions
• Styling: Class and Style attributes
Module 3 - Rendering:
Conditional Rendering:
• v-if
• v-else
• v-show
List Rendering:
• Array
• Iterables
• Object
• Key (how to use)
Module 4 - Adjusted values:
• Computed Properties
• Watchers
Module 5 - Components:
• Render Function
• Template syntax
• Data & State Management
Module 6 - Multiple components:
• Props
• Types, Required & validation
• Defaultes values
• Naming
• Emits and Custom Events
• Provide /Inject for Dependency Injection
Module 7 - Multiple components:
• Parent to child communication
• Child to parent communication
Module 8 - Forms:
• Event, key, and other modifiers
• Input bindings
• v-model (2-way data binding)
Module 9 - Vue CLI, Vite & Debugging:
• Vue CLI & Vite
• Advantages
• Commands
• Vue DevTools
• Using the browser's DevTools
• VSCode debugging
Module 10 - Slots:
• Single
• Multiple
• Default slot content
• Scoped Slots
Module 11 - Dynamics:
• Attributes
• Events
• Named Slots
• Dynamic Components
• Async Components
Module 12 - Going deeper:
• Composition API Advanced Reactivity
• Suspense for Async Components
• Accessing the DOM with refs
• Optional: Teleport
Module 13 - Lifecycle Hooks:
• Creation, Destruction
• Mounting, Updating, Activation
Module 14 - Patterns:
• Error Boundaries
• Higher-Order Components
• Renderless Components
• Container Components
Module 15 - Performance Optimizations:
• Lazy loading
• Functional Components
• v-once
• v-memo (Vue 3)
• v-pre
• v-cloak
Module 16 - Router:
• Static routing
• Dynamic routing
• Nested routes
• Catch-all routes (404 handling)
• Passing props
• Lazy loading
• Named routes & views
• Navigation guards
• Optional: Programmatic navigation
• Optional: Transitions
• Optional: Data fetching
Module 17 - Pinia (State Management):
• Store Structure
• Getters
• Actions
• Modules
• Setup Stores vs Options Stores
Module 18 - Pinia with Vue:
• Using mapState, mapGetters, mapActions
• Composition API integration
• Reactivity with storeToRefs
Appendix:
• Appendix 1: Nuxt
• Appendix 2: Animations
• Appendix 3: Testing
• Appendix 4: JSX
• Appendix 5: Custom Directives
• Appendix 6: Plugins & Composables
• Appendix 7: Maintainable Projects
• Appendix 8: Plugins
Instructor: Rick Beerendonk
Rick Beerendonk is instructor of the course. 30+ years software development experience, senior consultant at Oblicum, Microsoft MVP. Has trained thousands of developers across Europe in .NET, modern web development, API design, and software architecture.
Target audience:
Anyone who wants course about Vue.js, Vuex & Router
Language:
• English course material, english speaking instructor
Course material:
The course fee includes course documentation and exercises