Component Registration

A Vue component needs to be "registered" so that Vue knows where to locate its implementation when it is encountered in a template. There are two ways to register components: global and local.

Global Registration

You can make components available everywhere in your Vue application using the app.component method.

import { createApp } from 'vue'

const app = createApp({})

app.component('MyComponent', {
  /* implementation details */
})

If you use Single-File Components, you can register your imported .vue files directly.

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

The app.component method can be chained. This allows you to register multiple components in a row safely and easily.

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

Globally registered components can be used in the template of any component within the application. This even applies to all subcomponents, meaning all three of these components will also be available inside each other.

Drawbacks

Global registration does have a few drawbacks:

• It prevents build systems from removing unused components (a.k.a "tree-shaking"). If you register a component globally but never use it, it will still be included in the final bundle.
• It also makes dependency relationships less explicit in large applications. It makes it difficult to locate a child component's implementation from a parent component using it.

Local Registration

Local registration limits the availability of a component strictly to the specific file where it is registered. This keeps the relationship clear and allows build tools to remove unused code efficiently.

When using SFC with <script setup>, imported components are automatically available for use inside the template.

<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>

If you do not use <script setup>, you must use the components option to register them manually.

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  setup() {
    // setup logic
  }
}

Inside the components object, the key is the component's registered name and the value will contain the implementation of the component. The example above uses the ES2015 property shorthand and is equivalent to:

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

Locally registered components are not automatically available in child components. You need to import and register them in every single component file that needs them.

Component Name Casing

It is common practice to use PascalCase for component names when defining and registering them. This makes it very clear that the tag represents a Vue component instead of a native HTML element in your templates.

<template>
  <MyComponent />
</template>

Vue automatically supports resolving kebab-case tags to PascalCase component registrations. This means a component registered as MyComponent can be referenced in the template as <my-component>. This provides flexibility and ensures compatibility with in-DOM templates where standard HTML is case-insensitive.