Globally Registering Components

A reason for using plugins is to reduce boilerplate in all Vue application files by removing imports and replacing them with access to this and/or Vue.

Vue.js components are usually defined in a single-file component and imported explicitly. Much for the same reasons as we define global methods and properties, we might want to register components globally. This will allow us to use these components in all our other component templates without having to import them and register them under the components property.

A situation where this can be very useful is when using a design system or when a component is used across the code base.

Globally registering a component helps with some types of updates, such as if the filename is not exposed to the consumer so that when changing the filename, there is only one path to update as opposed to one per user.

Let's assume we have a CustomButton component in the CustomButton.vue file that looks as...