Vue - The Road to Enterprise

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

Intermediate

144 Lessons

40h

Certificate of Completion

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

95 Playgrounds

13 Quizzes

This course includes

95 Playgrounds

13 Quizzes

Course Overview

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 scalab...Show More

TAKEAWAY SKILLS

Vue Mixins

Vue Events

Vue Components

Vue Directives

Performance Enhancements In Vue.js

Web Development

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

What You'll Learn

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

Course Content

Before We Begin

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

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

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

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

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.

Advanced Component Patterns

9 Lessons

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

Managing Application State

13 Lessons

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

Managing Application Layouts

10 Lessons

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

10.

Performance Optimization

15 Lessons

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

11.

Vuex Patterns and Best Practices

12 Lessons

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

12.

Application Security

9 Lessons

Enhance security practices in Vue applications, focusing on client-side mitigations and safe handling of 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.

14.

Useful Patterns, Tips and Tricks

11 Lessons

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

15.

Conclusion

1 Lesson

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

16.

Appendix

1 Lesson

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

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Souvik Kundu

Front-end Developer

Eric Downs

Musician/Entrepeneur

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Hands-on Learning Powered by AI

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

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

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

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!

FOR TEAMS

Interested in this course for your business or team?

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