Log In
0% completed
All Lessons
Free Lessons (4)
Before We Begin
Course Overview
Companion App Preview
Migrating from Vue 2 to Vue 3
Introduction
Reactivity Caveats
Tree Shaking
App Initialization
Adding Global Properties and Custom Directives API
The V-Model Directive and Two-Way Data Binding
Unified Slots and createElement
Array Refs
Migration Guide
Pass Classes Explicitly via Props
Data Option and Emits Option
Functional Components and KeyCode Modifiers
Summary
Quiz Yourself on Vue 2 vs Vue 3 and Preparing for Migration
Challenge: Migration from Vue 2 to Vue 3
Solution: Migration from Vue 2 to Vue 3
Project Configuration and Useful Extensions
Setting up a project
Plugins Configuration
Stylelint and Prettier
Resources Loader and Vue Devtools
Summary
Quiz Yourself on Project Configuration and Useful Extensions
Scalable Project Architecture
Introduction
Src Directory
Managing Route Components by Feature
Encapsulating Components and Business Logic
Third-Party Libraries
Summary
Quiz Yourself on Scalable Project Architecture
Project and Component Documentation
Introduction
Documentation Generator and Component Documentation
Vue Styleguidist
Storybook
Summary
Quiz Yourself on Project and Component Documentation
API Layer and Managing Async Operations
Introduction
API Layer
Handling API States
How to Avoid Flickering Loader
Composition API Based Pattern
Request Cancelation and Abortable Function
Abort Property
Managing API State with Vuex
Error Logging
Summary
Quiz Yourself on API Layer and Managing Async Operations
Challenge: Utilizing the API Layer
Solution: Utilizing the API Layer
Challenge: API States
Solution: API States
Advanced Component Patterns
Introduction
Base Components
Wrapper Components
Renderless Components
TagsProvider
Summary
Quiz Yourself on Advanced Component Patterns
Challenge: Building a Renderless Alert Component
Solution: Building a Renderless Alert Component
Managing Application State
Introduction
Lifting up the State
Stateful Services
Composition API
Composables with Shared State
State Provider
What about Mixins?
Summary
Quiz Yourself on Managing Application State
Challenge: Lift the State Up
Solution: Lift the State Up
Challenge: Track Mouse Position
Solution: Track Mouse Position
Managing Application Layouts
Introduction
Route meta Based Page Layout
Dynamic Layout with a pageLayoutService
Dynamic Layout with a useLayout Composable
Products Layout
Layout Factory
Summary
Quiz Yourself on Managing Application Layouts
Challenge: Configure Layouts for a Dashboard Site
Solution: Configure Layouts for a Dashboard Site
Performance Optimization
Introduction
Lazy Loading Components
Lazy Loading with an Intersection Observer
Intersection Observer Using Composition API
Custom LazyLoad Component
Tree-shaking
PurgeCSS
Choosing Appropriate Libraries
Modern Mode and Static Content Optimization
Keep-alive
Performance Option, renderTriggered, and renderTracked
Summary
Quiz Yourself on Performance Optimization
Challenge: Optimizing Production Bundle
Solution: Optimizing Production Bundle
Vuex Patterns and Best Practices
Introduction
Vuex Tips
Naming Conventions and Vuex Modules Separation
Use Mapping Helpers and Vuex Store State
Automated Module Registration
Automated Module Scaffolding
Summary
Quiz Yourself on Vuex Patterns and Best Practices
Challenge: Vuex Mapping Helpers
Solution: Vuex Mapping Helpers
Challenge: Constant Types
Solution: Constant Types
Application Security
Introduction
Rendering HTML
Third-Party Libraries
JSON Web Tokens (JWT)
Access Permissions
Summary
Quiz Yourself on Application Security
Challenge: Render User-provided Content
Solution: Render User-provided Content
Best Practices for Testing Vue Applications
Introduction
Unit Testing Vue Components
Testing Library
End-to End Testing with Cypress
Useful Testing Tips
Summary
Quiz Yourself on Best Practices for Testing Vue Applications
Challenge: Unit Tests
Solution: Unit Tests
Challenge: e2e Tests
Solution: e2e Tests
Useful Patterns, Tips and Tricks
Single Page Apps and SEO
Static Site Generation and Server Side Rendering
Logging Values in SFC Template
Exports/Imports
Route Controlled Panel Modals
Styling Child Components
Vue app does not work in an older browser
Summary
Quiz Yourself on Useful Patterns, Tips, and Tricks
Challenge: Styling Nested Components
Solution: Styling Nested Components
Conclusion
What's Next?
Appendix
VS Code Extensions
Vue - The Road to Enterprise
/
...
/
Summary
Summary
Let’s summarize what we have learned in this chapter.
We'll cover the following...
What did we learn?
What did we learn?
...