How to Register Component in Vue: Syntax and Examples

In Vue, you register a component either globally using app.component() or locally inside another component's components option. Global registration makes the component available everywhere, while local registration limits it to the current component only.

Syntax

Vue offers two main ways to register components:

• Global registration: Use app.component('ComponentName', ComponentObject) to make a component available in all templates.
• Local registration: Inside a component's components option, list components you want to use only in that component.

javascript

/* Global registration */
import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'

const app = createApp({})
app.component('MyComponent', MyComponent)
app.mount('#app')

/* Local registration */
export default {
  components: {
    MyComponent
  }
}

Example

This example shows how to register a component globally and locally, then use it in templates.

vue

/* MyButton.vue */
<template>
  <button>Click me</button>
</template>

<script>
export default {
  name: 'MyButton'
}
</script>

/* main.js */
import { createApp } from 'vue'
import App from './App.vue'
import MyButton from './MyButton.vue'

const app = createApp(App)
app.component('MyButton', MyButton) // Global registration
app.mount('#app')

/* App.vue */
<template>
  <div>
    <h1>Global Component:</h1>
    <MyButton />

    <h1>Local Component:</h1>
    <LocalWrapper />
  </div>
</template>

<script>
import LocalWrapper from './LocalWrapper.vue'
export default {
  components: { LocalWrapper }
}
</script>

/* LocalWrapper.vue */
<template>
  <div>
    <MyButton /> <!-- Using locally registered component -->
  </div>
</template>

<script>
import MyButton from './MyButton.vue'
export default {
  components: { MyButton }
}
</script>

Output

<div>
  <h1>Global Component:</h1>
  <button>Click me</button>

  <h1>Local Component:</h1>
  <button>Click me</button>
</div>

Common Pitfalls

Common mistakes when registering components include:

• Forgetting to import the component before registering it.
• Using different names in registration and template (Vue is case-sensitive).
• Registering locally but trying to use the component globally.
• Not mounting the app after global registration.

javascript

/* Wrong: Using component without import */
export default {
  components: {
    MyButton // Error if MyButton is not imported
  }
}

/* Correct: Import before registering */
import MyButton from './MyButton.vue'
export default {
  components: { MyButton }
}

Quick Reference

Summary of component registration methods:

Registration Type	How to Register	Scope
Global	app.component('Name', Component)	Available in all templates
Local	components: { Name: Component }	Available only in current component

Key Takeaways

Use app.component() for global component registration in Vue.

Register components locally inside the components option to limit scope.

Always import components before registering them.

Component names in registration and templates must match exactly.

Global registration requires mounting the app after registration.