Vue'js documentation's "Components In-Depth" section gave me a pretty good idea of how Vue components are implemented and interact with each other. It's a powerful mechanism of code organization and reuse, and I found it strange Codecademy's "Learn Vue.js" course didn't go into any details on componentization at all. Still, as useful as Vue components are, they can't do everything and there are a few other mechanisms for code reusability in Vue.js. After reading "Reusability" section, my takeaway is that a beginner should know how to use these mechanisms: both to recognize their presence in example code and benefiting from work shared by others. In contrast, implementing these mechanisms is a more advanced topic a beginner can postpone until later.

The most significant page in this section is the first one: Vue Composables. These are self-contained packages of pure logic without a visual representation. In that regard it has some resemblance to Angular services but more limited in scope (which probably also means it is lighter weight.) It is possible to implement composable capability as a standard Vue component with no visual template (renderless component) but that incurs wasted overhead. For an even better idea of how a composable relate to other code reuse mechanisms, there's a comparisons section on this page.

I was most fascinated by the async state composable example, because it seems to be a way to solve many of the problems RxJS wants to solve but with less of a learning curve. Also, this is optional versus RxJS which is required to make real use of Angular. But if we really want RxJS, there exist Vue composable to interoperate with RxJS. It is part of VueUse, a collection of Vue composition utilities that cover a lot of ground. I see stuff to help with concepts like an app going full screen, an app that wants to keep the device awake, and to help an app communicate over web sockets. Some of these aren't terribly complex to implement on our own (like full screen) but using one of these composable component might be even easier.

Following the long and instructive page on Vue composable, there were two more pages far shorter in length. First is custom directives, a mechanism for installing and using code that needs direct low-level HTML DOM manipulation. It reads like a niche tool useful as a tool of last resort for things that can't be done any other way. The page ends with "In general, it is not recommended to use custom directives on components." And second page covers plugins, a mechanism to install functionality at the app level. We are warned to use plugins sparingly as too many of them start running into name conflicts and other general downsides of global code. This is partly because a plugin interacts with the rest of the app via non-plugin-specific mechanisms like Provide/Inject, custom directives, and attaching to global properties (app.config.globalProperties). The example on page shows two ways to do internationalization string plugin: attached to global properties, and provide/inject.

That's a lot of different ways we can package Vue code to be reusable, but they're limited in how they can participate in framework-level activities. For those, we need to use Vue's built-in components.