While reading Vue.js documentation on reusability, I learned of VueUse library filled with composable code available for use in our Vue apps. With that in mind, I was curious about the next section of documentation: "Built-in Components." What's special about these components? They must enable features requiring internal Vue support and could not be done (at least not efficiently) by an external code module. From what I can tell, they have one thing in common: they hook into platform changes to component structure.

First example supports transition animations. CSS defines a transition animation mechanism but that only applies to changing properties on an object. Animating the objects themselves being changed requires support like Vue's <Transition> for individual components and <TransitionGroup> for elements in a list. By default, adding or removing components from the application means an abrupt and instantaneous change that may leave the user disoriented. These components allow designer to add transition animation to visually guide the user through such changes for a better user experience. Both by adding/removing classes to trigger CSS transition animation plus JavaScript hooks for whatever can't be done via CSS.

An example of a feature that requires framework level support is Transition Mode, which manages how the old and new components interact to mitigate visually jarring artifacts. Moving from "mitigating a bad thing" to "enabling a great thing" is the Move Transitions demo for <TransitionGroup>, a great way to visually inform a user of changes in a list. After seeing that, I've become a fan of <Transition> / <TransitionGroup>. Sure, they can be abused just like all mechanisms designed to attract user attention (Die <blink> Die) but there's plenty of room for subtle and tasteful designs. On the downside, I'm not a fan of Named Transitions which introduces more name magic to Vue.

In the spirit of Vue keeping things lightweight and not reinventing wheels, <Transition> / <TransitionGroup> only enables transitions, they do not define any animations themselves. This page links to animation libraries (Animate.css, GreenSock, Anime.js, Motion One) that it plays well with.

As much as I love some of the animations demonstrated here, as a practical matter I'm not likely to use any of these directly in the near future. If I start building projects with Vue, I'll start without worrying about visual polish. For a first pass on visual polish, I'll probably use something like Vue Material. Crafting my own visual styles with transition animations will be much further down the line, if ever.

I'm equally unlikely to use anything else in Vue's "Built-in Components" section. <KeepAlive> keeps a <component> node alive to keep its state, in the expectation of eventual reinsertion back into the tree. <Teleport> moves visual elements somewhere outside of their proper location in Vue component hierarchy, useful for global model display dialog boxes. And <Sense> is still an experimental feature for consolidating visual feedback of multiple child asynchronous operations. (One spinning "waiting" animation instead of each component having their own.) <Sense> combined with <Transition> and <KeepAlive> to handle Vue Router changes is far too advanced of a technique for this beginner to worry about.

Which is true of most of the rest of Vue.js guides, but I wanted to skim over them anyway starting with "Scaling Up".