Component registration (global vs local) in Vue - Hands-On Comparison

Component registration (global vs local)

📖 Scenario: You are building a simple Vue app that shows a greeting message using a reusable component.You will learn how to register a component globally and locally in Vue 3.

🎯 Goal: Create a Vue app with a GreetingMessage component.First, register the component globally so it can be used anywhere.Then, register the component locally inside the main app component.

📋 What You'll Learn

Create a GreetingMessage component that displays 'Hello, Vue learner!'

Register GreetingMessage globally using app.component()

Register GreetingMessage locally inside the main app component's components option

Use the GreetingMessage component in the main app template

💡 Why This Matters

🌍 Real World

In real Vue apps, components can be registered globally to reuse them everywhere or locally to keep scope limited and improve performance.

💼 Career

Understanding component registration is essential for building scalable Vue applications and collaborating with teams on component structure.

1

Create the GreetingMessage component

Create a Vue component called GreetingMessage using defineComponent. It should render a <p> tag with the text 'Hello, Vue learner!'.

Vue

// Create the GreetingMessage component using defineComponent
// Your code here

Need a hint?

Use defineComponent and return a render function that creates a <p> element with the greeting text.

2

Register GreetingMessage globally

Create a Vue app using createApp. Register the GreetingMessage component globally using app.component('GreetingMessage', GreetingMessage).

Vue

import { createApp } from 'vue';

// Create the app
// Register GreetingMessage globally
// Your code here

Need a hint?

Use createApp({}) to create the app instance, then call app.component to register globally.

3

Register GreetingMessage locally in the main app component

Modify the main app component to register GreetingMessage locally inside the components option.

Vue

const app = createApp({
  // Register GreetingMessage locally here
  // Your code here
});
app.component('GreetingMessage', GreetingMessage);

Need a hint?

Inside createApp, add a components object with GreetingMessage as a property.

4

Use GreetingMessage component in the app template

Add a template option to the main app component that uses the <GreetingMessage /> tag to display the greeting.

Vue

const app = createApp({
  components: {
    GreetingMessage
  },
  // Add template using 
  // Your code here
});
app.component('GreetingMessage', GreetingMessage);

Need a hint?

Add a template string with the <GreetingMessage /> tag inside the app component.