HomeCoursesVue - The Road to Enterprise

5.0

Intermediate

40h

Updated 3 months ago

Vue - The Road to Enterprise

Gain insights into advanced practices for Vue. Discover migration techniques to Vue 3, project configuration, API layer creation, performance optimization, security, and testing best practices.

Join 2.7 million developers at

Overview

Content

Reviews

Vue is a popular JavaScript framework for front-end development. It is lightweight, flexible, and comes with a vibrant and evolving ecosystem. This course is a collection of best practices, advanced patterns, guides, and tips on various essential concepts related to the development of large-scale applications. The course starts by explaining how Vue 3 differs from Vue 2 and how you can migrate Vue 2 applications to Vue 3. Project configuration, documentation, useful development tools, and creating a scalable structure is covered next. After we look at best practices for creating an API layer and state maintenance, we’ll discuss performance optimization and application security. The course ends with a discussion on tools and best practices for testing Vue applications. After completing this course, you’ll be able to create, document, and test large scale front -end applications. You’ll also be able to optimize the performance of your application and make it more secure.

Vue is a popular JavaScript framework for front-end development. It is lightweight, flexible, and comes with a vibrant and evolv...Show More

WHAT YOU'LL LEARN

The ability to migrate your enterprise applications from Vue 2 to Vue 3

The ability to configure your Vue application and include popular plugins

An understanding of how to structure your application for scalability

A working knowledge of the best techniques for the API, state management, and performance optimization

Familiarity with making your Vue applications more secure

Hands-on experience with popular tools for testing Vue applications

The ability to migrate your enterprise applications from Vue 2 to Vue 3

TAKEAWAY SKILLS

Vue Mixins

Vue Events

Vue Components

Vue Directives

Performance Enhancements in Vue.js

Web Development

Content

144 Lessons13 Quizzes

Before We Begin

2 Lessons

Get familiar with advanced Vue.js skills and a Companion App for practical examples.

Course Overview

Companion App Preview

Migrating from Vue 2 to Vue 3

16 Lessons

Look at Vue 3's enhancements, migration tips, and adaptation strategies for optimal use.

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

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

Summary

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.

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

6 Lessons

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

Introduction

Documentation Generator and Component Documentation

Vue Styleguidist

Storybook

Summary

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.

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

9 Lessons

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

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

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?

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

10 Lessons

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

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

10.

Performance Optimization

15 Lessons

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

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

11.

Vuex Patterns and Best Practices

12 Lessons

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

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

12.

Application Security

9 Lessons

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

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

Authentication With Vue.js Using Auth0

Project

Premium

13.

Best Practices for Testing Vue Applications

11 Lessons

Tackle best practices for writing robust unit and end-to-end tests in 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

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

Summary

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

E-commerce Store in Vue.js With Payment Integration

Project

Premium

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Thomas Findlay

Developed by MAANG Engineers

Every Educative lesson is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Software Developer

Carlos Matias La Borde

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Personalized Interview Prep

Skip the LeetCode grind with a custom roadmap that adapts to your goals. Hands-on practice for Coding Interviews, System Design, and more.

Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Free Resources

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath