Vue.js, Vuex & Router Course

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. 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

Aside: Course will always cover the latest version and best or popular practices.
Afterwards, you are able to add Vue parts immediately to both existing and new web applications.

Content:

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 7: Forms

• Event, key, and other modifiers
• Input bindings
• v-model (2-way data binding)

Module 8: Vue CLI, Vite & Debugging

• Vue CLI & Vite
  • Advantages
  • Commands
• Vue DevTools
• Using the browser's DevTools
• VSCode debugging

Module 9: Slots

• Single
• Multiple
• Default slot content
• Scoped Slots

Module 10: Dynamics

• Attributes
• Events
• Named Slots
• Dynamic Components
• Async Components

Module 11: Going deeper

• Composition API Advanced Reactivity
• Suspense for Async Components
• Accessing the DOM with refs
• Optional: Teleport

Module 12: Lifecycle Hooks

• Creation, Destruction
• Mounting, Updating, Activation

Module 13: Patterns

• Error Boundaries
• Higher-Order Components
• Renderless Components
• Container Components

Module 14: Performance Optimizations

• Lazy loading
• Functional Components
• v-once
• v-memo (Vue 3)
• v-pre
• v-cloak

Module 15: 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 16: Pinia (State Management)

• Store Structure
• Getters
• Actions
• Modules
• Setup Stores vs Options Stores

Module 17: Pinia with Vue

• Using mapState, mapGetters, mapActions
• Composition API integration
• Reactivity with storeToRefs

Appendix

Appendix 1: Nuxt

• Views
• Routing
• Data Fetching
• Prerendering

Appendix 2: Animations

• State Transitions
• List Transitions

Appendix 3: Testing

• Unit Tests
• Storybook
• Vue Test Utils (Vue 3)

Appendix 4: JSX

• JSX vs Template syntax
• JSX vs JavaScript Appendix 5: Custom Directives

Appendix 5: Custom Directives

Appendix 6: Plugins & Composables

• Writing Vue Plugins
• Creating reusable composables

Appendix 7: Maintainable Projects

• Best practices
• Code organisation

Appendix 8: Plugins

 

 

 

 

Other relevant courses