Component registration (global vs local) in Vue

Introduction

Component registration lets Vue know about your components so you can use them in your app. Global registration makes components available everywhere, while local registration limits them to specific parts.

You want a button component used in many places across your app.

You have a special widget used only inside one page or component.

You want to keep your app organized by only loading components where needed.

You want to reduce app size by not registering unused components globally.

Syntax

Vue

/* Global registration */
import MyButton from './MyButton.vue'
app.component('MyButton', MyButton)

/* Local registration inside a component */
export default {
  components: {
    MyButton
  }
}

Global registration is done on the Vue app instance before mounting.

Local registration is done inside the components option of a component.

Examples

This makes <MyButton> usable anywhere in the app without importing it again.

Vue

// Global registration example
import { createApp } from 'vue'
import App from './App.vue'
import MyButton from './MyButton.vue'

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

This makes <MyButton> usable only inside this component.

Vue

// Local registration example
import MyButton from './MyButton.vue'

export default {
  components: {
    MyButton
  },
  template: `<MyButton />`
}

Sample Program

This example shows a button component registered locally inside a parent component. Clicking the button updates the count shown inside it.

Vue

<script setup>
import { ref } from 'vue'
import MyButton from './MyButton.vue'

const count = ref(0)
function increment() {
  count.value++
}
</script>

<template>
  <h2>Local Registration Example</h2>
  <MyButton @click="increment">Clicked {{ count }} times</MyButton>
</template>

<!-- MyButton.vue -->
<script setup>
const emit = defineEmits(['click'])
</script>
<template>
  <button @click="$emit('click')" style="padding: 0.5rem 1rem; font-size: 1rem;">
    <slot></slot>
  </button>
</template>

Important Notes

Global registration can increase app size if many components are registered but not used everywhere.

Local registration helps keep components scoped and can improve performance by loading only needed components.

Use PascalCase or kebab-case for component names consistently.

Summary

Global registration makes components available everywhere in the app.

Local registration limits component usage to a specific component only.

Choose registration type based on how widely you use the component and app size considerations.