Advanced Vue Component Design

Cover image

I just finished rewatching a few lessons from the Advanced Vue Component Design course by Adam Wathan and realised what a valuable resource it is. If you wish to learn something more about renderless components it's unbeatable.

As a side note I'm lucky to work for a great company that gave me an opportunity to learn from this course.

Key take-aways:

  • there are various ways to reuse code in Vue: mixins, extend, composition, very often composition offers the most flexibility
  • not every component needs a template, there's great power in creating renderless components
  • Data Provider Components - can be used to fetch data and make it available in the parent scope, think <fetch-json src="..."></fetch-json> component, which connects to an API - here's a very dumbed down example:
import axios from 'axios';

export default {
  props: {
    src: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      data: null
    };
  },
  created() {
    axios.get(this.src)
      .then(response => {
        this.data = response.data
      })
  },
  render() {
    return this.$scopedSlots.default({
      data: this.data
    })
  }
}
<fetch-json src="...">
  <span slot-scope="{ data }">
    {{ data }}
  </span>
</fetch-json>
  • scoped slots can be used to pass data and event handlers up to the parent scope allowing to build components that provide functionality without enforcing any specific kind of presentation - this could be demonstrated on an example of a RenderlessForm component styled using Bulma, the interesting thing is that it could be adapted to any other CSS framework without requiring any changes in the RenderlessForm component itself, which is only concerned with the form's functionality, not presentation

  • scrollIntoView makes it possible to keep the selected element on a scrollable list in view when implementing keyboard navigation 🎉
// block can be one of: "start", "center", "end", or "nearest"
element.scrollIntoView({ block: "nearest" })
  • positioning is tricky, Popper.js is a nifty little library that helps with positioning and the custom flip behaviour makes it a very attractive proposition