Advanced Vue.js - Directives, Plugins, and Render Functions Chapter 17Most of the components have to be developed only once for a responsive page, and only
the styling is done multiple times according to different sizes. This can save a lot of
development time if compared to having a separate site optimized for mobile.
Normally, in a responsive page table, go from columnar to stacked, as shown in the
following illustration:
I never liked this approach, but the objective disadvantage is that if you make your table
look good on one side, it will look not so good on the other. This is because you have to
style the cells in the same way and what the responsiveness does is that it stacks them up.
What our BreedTable component does is to dynamically switch between the two
components instead of simply relying on the CSS. Since it's a functional component, it has
the advantage of being very lightweight compared to a full-fledged component.
In a real application, using the onresize event is questionable, mainly because of the
performance hit. In a production system, the solutions for responsiveness via JavaScript
need to be more structured. For example, consider using a timer or using matchMedia.
As a last thing, note how the Vue instance never registers the two subcomponents; this is
because they never appear in a template but are referenced directly in the code as objects.