What Are Global Components?

Global components are reusable Vue components that can be accessed anywhere in your application, unlike local components which are restricted to the scope of their parent component. Once registered globally, you can reference these components in any template without additional imports or local registration, streamlining component reuse across your project.

When to Use Global Components

Global components are ideal for:

• UI elements that appear repeatedly throughout you're app (e.g., custom buttons, navigation bars, modal dialogs)
• Maintaining consistent look and behavior for critical components across all parts of your application, ensuring a unified user experience

Creating Global Components in Vue 3

First, ensure you have a Vue 3 project. If not, create one using the official initialization command:

npm init vue@latest

Follow the prompts to set up your project with desired features.

1. Build Your Global Component

Create a new file src/components/GlobalHello.vue with the following content:

<template>
  <div class='global-hello'>
    <h2>{{ greetingText }}</h2>
  </div>
</template>

<script>
export default {
  name: 'GlobalHello',
  data() {
    return {
      greetingText: 'Hi from a globally registered component!'
    };
  }
};
</script>

<style scoped>
.global-hello {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #2563eb;
}
</style>

2. Register the Component Globally

Open src/main.js and register the component with your Vue app instance:

import { createApp } from 'vue';
import App from './App.vue';
import GlobalHello from './components/GlobalHello.vue';

const vueApp = createApp(App);

// Register global component
vueApp.component('GlobalHello', GlobalHello);

vueApp.mount('#app');

This makes GlobalHello available in any component’s template across your application.

3. Use the Global Component

In your root App.vue (or any other component), use the global component directly in the template:

<template>
  <div id='app-container'>
    <GlobalHello />
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style>
#app-container {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #1e293b;
  margin-top: 70px;
}
</style>

Practical Example: Reusable Global Button

For a more real-world use case, create a consistent custom button component that can be used everywhere in your app.

Create the Button Component

Make a new file src/components/AppButton.vue:

<template>
  <button class='app-button' @click='handleButtonClick'>
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'AppButton',
  methods: {
    handleButtonClick() {
      this.$emit('button-clicked');
    }
  }
};
</script>

<style scoped>
.app-button {
  background-color: #10b981;
  border: none;
  color: white;
  padding: 12px 24px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.app-button:hover {
  background-color: #059669;
}
</style>

Register the Button Globally

Update src/main.js to include the new component:

import { createApp } from 'vue';
import App from './App.vue';
import AppButton from './components/AppButton.vue';

const vueApp = createApp(App);

vueApp.component('AppButton', AppButton);

vueApp.mount('#app');

Implement the Button in Your App

Use the button in App.vue and handle its click event:

<template>
  <div id='app-container'>
    <AppButton @button-clicked='showNotification'>Press Me</AppButton>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    showNotification() {
      alert('Global button was clicked!');
    }
  }
};
</script>

<style>
#app-container {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #1e293b;
  margin-top: 70px;
}
</style>