Vue 2 provieds two distinct mechanisms for making custom elements available within an application: global registration and local registration. Each approach defines the visibility scope and instantiation rules for components.

Global Registration

Global components are registered before the root Vue instance is initialized. Once defined, they can be referenced in the template of any Vue instance created afterward within the application.

Vue.component('system-alert', {
  template: '<div class="alert-box">Maintenance scheduled</div>'
});

const primaryInstance = new Vue({
  el: '#main-root'
});

Important: The registration call must execute before the initialization of any Vue instance that intends to utilize the component. Failing to do so will result in unrecognized custom elements.

Local Registration

Local components are defined within the components option of a specific Vue instance. They remain scoped exclusively to that instance's template, providing better encapsulation and preventing global namespace pollution.

const analyticsApp = new Vue({
  el: '#analytics-root',
  components: {
    'metrics-card': {
      template: '<article class="card">Performance metrics</article>'
    }
  }
});

Explicit Registration via Vue.extend()

While the shorthand syntax above is widely used, Vue's underlying registration mechanism relies on Vue.extend(). This method generates a subclass of Vue, effectively acting as a component constructor. Understanding this explicit workflow clarifies how global and local registrations differ internally.

Step-by-Step Local Registration

// 1. Create a component constructor
const DataRenderer = Vue.extend({
  template: '<div>Current state: {{ currentState }}</div>',
  data() {
    return { currentState: 'active' };
  }
});

// 2. Register it locally within a specific instance
new Vue({
  el: '#widget-container',
  components: {
    'data-renderer': DataRenderer
  }
});

Step-by-Step Global Registration

// 1. Create a component constructor
const OverlayModal = Vue.extend({
  template: '<dialog>Modal placeholder</dialog>'
});

// 2. Register it globally
Vue.component('overlay-modal', OverlayModal);

// 3. Initialize multiple independent instances
new Vue({ el: '#zone-alpha' });
new Vue({ el: '#zone-beta' });

DOM Structure and Component Usage

The following markup demonstrates how the registered components interact with their respective mountt points:

<div id="main-root">
  <system-alert></system-alert>
</div>

<div id="analytics-root">
  <metrics-card></metrics-card>
  <!-- system-alert is accessible here because it was registered globally -->
  <system-alert></system-alert>
</div>

Behavioral Notes on Mixed Registration

In Vue 2.x (particularly observed in version 2.5.1), mixing globally and locally registered components within the same mount element can occasionally trigger console warnings, although the DOM typically renders without failure. The shorthand registration syntax generally bypasses these warnings by handling internal template resolution more efficiently. When architecting applications, maintaining consistant registration patterns per scope ensures predictable behavior and minimizes framework overhead.