Menu

We are the JSLeague

Advanced Vue.js Components

This event has passed,
was awesome tho!

Course details

Course description

During this workshop we're gonna take a hands-on, test driven approach to implementing some best practice component patterns in Vue.js. We'll start with a few insights into how components are actually implemented in Vue.js, to get a better grasp of how they work and interact with each other. We'll continue with a short primer on how to test your components, as the hands-on part of the workshop will require you writing components that pass certain tests. We're then gonna directly tackle the patterns, which, depending on how fast we'll move and participants' interests, can be some or all of the following:

  • parent <-> child communication using props and events
  • using mixins to share common functionality between components
  • using lazy-loading to load components only when they need to be displayed
  • using v-model with form input components, and even with entire forms
  • using functional components for improved rendering performance, and also to implement the popular React HOC (higher-order components) pattern
  • using slots to customize how generalist components look like and also to manage layouts in multi-page applications
  • using render functions instead of templates whenever we need more complex rendering logic

At the end of the workshop participants will have a better understanding of how to leverage these patterns to create reusable components for more maintainable applications, and how to use tests to define the requirements and API of their components.

Technical requirements

  • 90%
    ES6
  • 60%
    Beginner Vue.js
jsleague logo big
{ }