Vue 3

How to Register a Global Component in Vue 3?

Spread the love

Sometimes, we may want to add components to our Vue 3 app that’s available throughout the app.

In this case, global components are suitable for this purpose.

In this article, we’ll look at how to register a global component with Vue 3.

Register a Global Component in Vue 3

To register global components with Vue 3, we can use the app.comnponent method.

For instance, we can write:


import { createApp } from "vue";
import App from "./App.vue";
import HelloWorld from "./components/HelloWorld.vue";

const app = createApp(App);
app.component("hello-world", HelloWorld);


    <hello-world />

export default {
  name: "App",


  <div class="hello">hello world</div>

export default {
  name: "HelloWorld",
  props: {
    msg: String,

In main.js , we import the HelloWorld component and pass that into the app.component method.

The first argument is the component name.

The 2nd argument is the component itself.

Then in App.vue , we use the component by adding the tag with the given component name.

Then in HelloWorld.vue , we add some content to the template.

The component name only works when we use the kebab-case for the tag name since we defined it with a kebab-case tag name.

We can use the hello-world component in any other component since we registered it globally.


We can register a global component easily with Vue 3’s app.component method.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *