Introduction

Component nesting is an approach to composition where the application is built up from smaller units (components). The application can be thought of as components fitting within each other. In this scenario, any shared functionality will be provided through components. Vue.js provides other methods of composition.

Component-based composition can be very verbose and will mean we repeat imports wherever a certain piece of functionality is needed. This does not follow the DRY principle. To avoid this duplication and verbosity, we can globally register mixins, plugins, and components to inject the globally available resources to be used throughout the application. This can reduce friction and frustration at having to type out import MyComponent from ... in every consumer of MyComponent.

Much in the same way, applications can be built from different types of primitives (mixins, plugins, and components). For maximum flexibility, components can be defined in different ways...