YouTipThis is a globally registered component!
`
});
```
Once registered, you can use `Vue3 Api App Component
## Vue 3 Global API: app.component()
In Vue 3, the `app.component()` method is a fundamental global API used to register global components. Once a component is registered globally, it can be used anywhere within your application's templates without the need to import it individually in every file.
---
## 1. What is `app.component()`?
`app.component()` is an instance method of the Vue application instance (created via `createApp`). It serves two primary purposes:
1. **Register** a global component by providing both a name and a component definition.
2. **Retrieve** an already registered global component by passing only its name.
### Syntax
```javascript
// 1. Registration
app.component(name, definition);
// 2. Retrieval
const MyComponent = app.component(name);
```
### Parameters
* **`name`** (`string`): The name of the component. This is the tag name you will use inside your HTML or Vue templates (e.g., ``).
* **`definition`** (`Component` or `DefineComponent`): An object containing the component's options (such as `template`, `data`, `methods`, `setup`, etc.), or a compiled Single File Component (SFC).
### Basic Example
```javascript
import { createApp } from 'vue';
const app = createApp({});
// Register a simple global component
app.component('my-component', {
template: ``) in templates.
### Avoid Overusing Global Registration
While global registration is convenient, it has a few drawbacks:
* **Bundle Size (Tree Shaking)**: Globally registered components cannot be tree-shaken by build tools like Webpack or Vite. Even if you do not use a global component anywhere in your code, it will still be included in the final production bundle.
* **Dependency Obscurity**: It makes relationships between components less explicit. A developer looking at a template might find it harder to trace where a component is defined if it is registered globally.
### When to Choose Local Registration
For components that are only used in one or a few specific places (e.g., a `UserProfileCard` used only on the profile page), use **local registration** instead:
```html