Components in depth

Components are the building blocks of the framework. In Chapter 1, The Vue 3 Framework, we saw how to work with components, declare reactive variables, and more. In this section, we will explore more advanced features and definitions.

Local and global components

When we start our Vue 3 application, we mount the main component (App.vue) to an HTML element in the main.js file. After that, in the script section of each component, we can import other components to use locally through this command:

import MyComponent from "./MyComponent.vue"

In this manner, to use MyComponent in another component, we need to import it again in such a component. If one component is used continuously in multiple components, this repetitive action breaks the development DRY principle (see Chapter 2, Software Design Principles and Patterns). The alternative is to declare the component as global, by attaching it directly to our Vue application instead of each component...