JAVASCRIPT
Globally Registering Vue 3 Components
Discover how to globally register Vue 3 components using `app.component` to make them available throughout your application without repetitive imports.
// components/MyGlobalButton.vue
<template>
<button class="global-button" @click="$emit('click')">
<slot>Click Me (Global)</slot>
</button>
</template>
<script setup>
defineEmits(['click']);
</script>
<style scoped>
.global-button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.global-button:hover {
background-color: #45a049;
}
</style>
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import MyGlobalButton from './components/MyGlobalButton.vue'; // Import the component
const app = createApp(App);
// Globally register MyGlobalButton
app.component('MyGlobalButton', MyGlobalButton);
app.mount('#app');
// AnyComponent.vue (e.g., App.vue)
<template>
<div>
<h1>Welcome to My App</h1>
<p>This button is globally registered:</p>
<MyGlobalButton @click="handleGlobalButtonClick">
Submit
</MyGlobalButton>
<p>You can use it anywhere without importing.</p>
</div>
</template>
<script setup>
const handleGlobalButtonClick = () => {
alert('Global button clicked!');
};
</script>
How it works: This snippet shows how to globally register a Vue 3 component, making it accessible in any other component's template without an explicit `import` and `components` declaration. In `main.js`, after creating the Vue `app` instance, use `app.component('ComponentName', ImportedComponent)` to register it. This is beneficial for frequently used components like buttons, icons, or layout elements, simplifying component usage and reducing boilerplate in large applications, though it's generally recommended for truly universal components to avoid naming conflicts.