Vue 3 Component Registration Strategies (Global vs. Local)

// src/components/GlobalButton.vue
<template>
  <button class="global-btn" @click="$emit('click')">
    <slot>Global Button</slot>
  </button>
</template>

<script setup>
import { defineEmits } from 'vue';
defineEmits(['click']);
</script>

<style scoped>
.global-btn {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}
</style>

// src/components/LocalCard.vue
<template>
  <div class="local-card">
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
    <slot></slot>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

defineProps({
  title: String,
  content: String,
});
</script>

<style scoped>
.local-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
h3 {
  color: #333;
}
p {
  color: #666;
}
</style>

// src/main.js (Global Registration)
import { createApp } from 'vue';
import App from './App.vue';
import GlobalButton from './components/GlobalButton.vue'; // Import globally used component

const app = createApp(App);

// Global registration: available in all components without explicit import
app.component('GlobalButton', GlobalButton);

app.mount('#app');

// src/App.vue (Usage example for both global and local components)
<template>
  <div id="app">
    <h1>Component Registration Strategies</h1>

    <h2>Global Component Usage</h2>
    <GlobalButton @click="handleGlobalButtonClick">
      Click Me (Globally Registered)
    </GlobalButton>

    <h2>Local Component Usage</h2>
    <LocalCard title="My Local Card" content="This component is imported and registered locally within App.vue.">
      <p>Extra content for the card.</p>
    </LocalCard>

    <h2>Hybrid Usage (Global button inside Local Card)</h2>
    <LocalCard title="Card with Global Button" content="Demonstrates using a global component inside a locally registered one.">
      <GlobalButton @click="handleHybridButtonClick">
        Hybrid Action
      </GlobalButton>
    </LocalCard>

  </div>
</template>

<script setup>
import { ref } from 'vue';
// Local registration: only available in this component
import LocalCard from './components/LocalCard.vue';

const handleGlobalButtonClick = () => {
  alert('Global Button Clicked!');
};

const handleHybridButtonClick = () => {
  alert('Hybrid Button Clicked!');
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</template>