Registration

Vue components must be registered before they can be used in templates. There are two main ways to register components: globally and locally.

Global Registration

Register a component globally so it can be used in any template within the app:

import { createApp } from "vue";
import MyComponent from "./MyComponent.vue";

const app = createApp({});
app.component("MyComponent", MyComponent);

You can chain multiple registrations:

app.component("ComponentA", ComponentA).component("ComponentB", ComponentB);

Globally registered components are available in all templates, including subcomponents.

When to use:
Use global registration for layout components, icons, or UI elements used throughout your app.

Local Registration

Register a component locally to make it available only in the current component:

import MyComponent from "./MyComponent.vue";

export default {
  components: {
    MyComponent,
  },
};

With <script setup>, just import the component and use it in the template:

<script setup>
import MyComponent from "./MyComponent.vue";
</script>
<template>
  <MyComponent />
</template>

When to use:
Prefer local registration for components only used in a specific context. This improves maintainability and enables better tree-shaking.

Dynamic & Async Registration

You can register components dynamically or load them asynchronously for code-splitting:

export default {
  components: {
    AsyncComponent: () => import("./AsyncComponent.vue"),
  },
};

Component Name Casing

Use PascalCase for component names in JavaScript, and either PascalCase or kebab-case in templates:

<MyComponent />
<my-component />

Best Practices

• Prefer local registration for better tree-shaking and explicit dependencies.
• Use global registration for truly global UI elements.
• Use async components for large or rarely used components.

Further Reading

• Component Registration Guide