Production-Grade Vue.js

Ben Hong

Ben Hong

4 hours, 37 minutes CC
Production-Grade Vue.js

Course Description

Learn best practices for building production-grade Vue.js applications that can scale and grow! You'll learn component design patterns, workflows to enhance productivity, testing methodologies, state management, routing, best practices for architecting increasingly complex applications, and more.

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: February 18, 2021

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents


Section Duration: 2 minutes

Best Practices

Section Duration: 33 minutes


Section Duration: 20 minutes
  • Vue CLI
    Ben demonstrates how to use the Vue CLI. It can be run either from the command line or through the GUI Mode. When using the GUI mode, configuration and application statistics can be managed and viewed for multiple Vue projects.
  • Vue CLI Alternatives and Q&A
    Ben explains Vue CLI may not work for micro-frontends or legacy migrations. In those cases, Vue can be added to an application from the CDN. Questions about Vite, extending Vue CLI, and how to add plugins with the Vue CLI are also covered in this segment.


Section Duration: 59 minutes
  • Component Naming Conventions
    Ben recommends avoiding single-word component names because conflicts can arise with core or third-party components. Prefixing component names with "App", "Base" or "The" adds clarity to the component's intended use. Methods should also be named based on what they do and not based on the events that trigger them.
  • When to Refactor
    Ben discusses the principle of data-driven refactoring which helps determine when a component is too complex and should be refactored. Components should be refactored when they are too hard to understand, parts of the component require their own state, or it's difficult to describe a components responsibility.
  • Component File Structure
    Ben compares a nested folder structure with a flat folder structure. The flat structure makes reusing and refactoring components easier. Page-level components like Home or About should still be organized into a separate directory since they are related to routing and typically composed from atomic-level components.
  • Component Props
    Ben demonstrates how to use Object notation to declare component props. Object notation allows a type, default value, and validator function to be declared for each prop.
  • Solving Prop Complexity with Slots
    Ben uses a thought-exercise to explain how using too many props can increase the technical debt of a component. Slots simplify the complexity by allowing content to be injected into a component from its parent.
  • Dynamically Switching Components
    Ben explains how to use the Vue Component to dynamically swap components in an application. The :is directive specifies the component to load. The v-bind directive binds props for the component.
  • Component Design Patterns
    Ben covers two component design patterns. The Vendor Component Wrapper pattern recommends wrapping vendor components in a custom Vue component to encapsulate the API and functionality. The Transparent Component pattern uses the inheritAttrs property to allow props, attributes and listeners to get passed through the parent element of a component.
  • Mixins
    Ben explains why mixins are useful for refactoring Options API components. However, overusing mixins can lead to property name conflicts and increase the difficulty to debug the origin of a piece of logic.
  • Provide & Inject
    Ben explains the difference between using the Provide/Inject API and using props. While props depends on a specific parent-child relationship, the Provide/Inject API will inject data into the parent-child tree for any descendant to consume.

Composition API

Section Duration: 35 minutes

State Management

Section Duration: 30 minutes
  • Vuex Best Practices
    Ben shares some best practices for managing state with Vuex. Data shared between components or between router views should be stored in Vuex. User interface variables, form data or validation results should not be stored in Vuex. Map helpers can simplify property and method names within the Vuex global store.
  • Vuex and Composition API Q&A
    Ben answers questions about using map helpers, communicating between modules with actions, and using the Composition API versus Vuex.
  • Routing Techniques
    Ben explains the three aspects of routing in Vue. Layout components contain markup shared between pages. View components define the page-level components. Routes define how paths map to view components. Lazy-loading routes is also discussed in this segment.


Section Duration: 27 minutes
  • Testing Libraries
    Ben summarizes different testing libraries and compares unit testing with component testing. Unit tests should not test core Vue logic like the existence the computed property. They should focus on application functionality.
  • Unit & E2E Testing
    Ben introduces Cypress and TestCafe which are two frameworks for performing end-to-end testing. Like unit tests, end-to-end tests should be able to run independently and not rely on any shared state between tests. UI element tests should not rely on CSS classes since styling can change depending on the current interaction state.
  • Testing Q&A
    Ben answers questions about writing tests for known bugs and testing with manual testers.
  • Cypress
    Ben demonstrates how the Cypress testing framework runs UI tests in the browser. After the tests are complete, the Cypress UI allows time-traveling and inspection of HTML elements at any point in the test's progression.

Code Maintenance

Section Duration: 1 hour, 4 minutes

Wrapping Up

Section Duration: 4 minutes

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now