It seems that your browser is not supported by our application.

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

6 Lessons

Explore setting up a Vue project, configuring plugins, and enhancing development with useful extensions.

Setting up a project

Plugins Configuration

Stylelint and Prettier

Resources Loader and Vue Devtools

Quiz Yourself on Project Configuration and Useful Extensions

Scalable Project Architecture

7 Lessons

Break down complex ideas of scalable project architecture for efficient Vue development.

Managing Route Components by Feature

Src Directory

Encapsulating Components and Business Logic

Third-Party Libraries

Quiz Yourself on Scalable Project Architecture

Project and Component Documentation

6 Lessons

Take a closer look at effective documentation, utilizing tools like Vue Styleguidist and Storybook.

Documentation Generator and Component Documentation

Vue Styleguidist

Storybook

Quiz Yourself on Project and Component Documentation

API Layer and Managing Async Operations

15 Lessons

Focus on effectively managing API interactions, states, and user feedback in Vue enterprise apps.

How to Avoid Flickering Loader

API Layer

Handling API States

Composition API Based Pattern

Request Cancelation and Abortable Function

Abort Property

Managing API State with Vuex

Error Logging

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

9 Lessons

Approach advanced Vue component patterns, including base, wrapper, and renderless components.

Base Components

Wrapper Components

Renderless Components

TagsProvider

Quiz Yourself on Advanced Component Patterns

Challenge: Building a Renderless Alert Component

Solution: Building a Renderless Alert Component

Managing Application State

13 Lessons

Step through managing and sharing state in Vue applications using various patterns and APIs.

Composables with Shared State

State Provider

What about Mixins?

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

10 Lessons

Discover the logic behind managing layouts dynamically in Vue, using services, composables, and layout factories.

Route meta Based Page Layout

Dynamic Layout with a pageLayoutService

Dynamic Layout with a useLayout Composable

Products Layout

Layout Factory

Quiz Yourself on Managing Application Layouts

Challenge: Configure Layouts for a Dashboard Site

Solution: Configure Layouts for a Dashboard Site

10.

Performance Optimization

15 Lessons

Go hands-on with Vue performance optimization techniques like lazy loading and tree shaking.

Lazy Loading with an Intersection Observer

Lazy Loading Components

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

Quiz Yourself on Performance Optimization

Challenge: Optimizing Production Bundle

Solution: Optimizing Production Bundle

11.

Vuex Patterns and Best Practices

12 Lessons

Enhance your skills in efficient Vuex management using best practices, naming conventions, and automation tools.

Naming Conventions and Vuex Modules Separation

Vuex Tips

Use Mapping Helpers and Vuex Store State

Automated Module Registration

Automated Module Scaffolding

Quiz Yourself on Vuex Patterns and Best Practices

Challenge: Vuex Mapping Helpers

Solution: Vuex Mapping Helpers

Challenge: Constant Types

Solution: Constant Types

12.

Application Security

9 Lessons

Enhance security practices in Vue applications, focusing on client-side mitigations and safe handling of user-provided content.

Rendering HTML

Third-Party Libraries

JSON Web Tokens (JWT)

Access Permissions

Quiz Yourself on Application Security

Challenge: Render User-provided Content

Solution: Render User-provided Content

13.

Best Practices for Testing Vue Applications

11 Lessons

Tackle best practices for writing robust unit and end-to-end tests in Vue applications.

Unit Testing Vue Components

Testing Library

End-to End Testing with Cypress

Useful Testing Tips

Quiz Yourself on Best Practices for Testing Vue Applications

Challenge: Unit Tests

Solution: Unit Tests

Challenge: e2e Tests

Solution: e2e Tests

14.

Useful Patterns, Tips and Tricks

11 Lessons

Master efficient Vue techniques, enhance SEO, streamline imports, debug templates, style components, and ensure browser compatibility.

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

Quiz Yourself on Useful Patterns, Tips, and Tricks

Challenge: Styling Nested Components

Solution: Styling Nested Components

15.

Conclusion

1 Lessons

Learn how to use essential Vue practices for scalable and maintainable enterprise projects.

What's Next?

16.

Appendix

1 Lessons

Get started with essential VS Code extensions to enhance Vue development, including Vetur, ESLint, and Prettier.

VS Code Extensions

Course Author

Thomas Findlay

Project

Authentication With Vue.js Using Auth0

intermediate

Project

Authentication With Vue.js Using Auth0

Learn to build a Vue.js web application with Auth0 authentication including view creation, routing, and secure access management.

intermediate

E-commerce Store in Vue.js With Payment Integration

Project

intermediate

Project

E-commerce Store in Vue.js With Payment Integration

Build an e-commerce store using Vue.js with Tailwind, featuring product display and Square API payment integration.

intermediate