0% completed

All LessonsFree Lessons (4)

Before We Begin

Course Overview Companion App Preview

Migrating from Vue 2 to Vue 3

Reactivity Caveats

App Initialization

Adding Global Properties and Custom Directives API

The V-Model Directive and Two-Way Data Binding

Unified Slots and createElement

Migration Guide

Pass Classes Explicitly via Props

Data Option and Emits Option

Functional Components and KeyCode Modifiers

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

Project

Authentication With Vue.js Using Auth0

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

Appendix

VS Code Extensions

Project

E-commerce Store in Vue.js With Payment Integration

Vue - The Road to Enterprise/

...

/

Array Refs

Array Refs

Learn the difference between array refs in Vue 2 and Vue 3.

We'll cover the following...

Vue 2
Vue 3
- Options API
- Composition API

Vue 2

In Vue 2, if we used a ref attribute with the v-for directive, the $refs property would be populated with an array of refs.

Let’s run the following code and look at the array refs example in Vue 2:

Note: The code below may take a while to run. When the server starts, go to the app URL to see the output.

import "./examples/array-refs/array-refs";

Array refs example in Vue 2

In the array-refs.js file, a new Vue app is created that renders the ArrayRefsExample component.
The ArrayRefsExample component renders a list of fruits. Each fruit, li, element has a fruitsRef ref. In Vue 2, if a ref is added to items in a loop, Vue automatically populates an array of refs.
The value of the fruitsRef

...

Ask