With the new versions of Vue3 out now, it’s useful to start learning how the new updates will change the way we write code. One example is the changes in the way we write our index.js file (the file that handles creating our Vue app).

Today, we’ll take a look at how to register Vue3 Global Components that can be used across our entire Vue app. It’s a little different from how we declared them in Vue2, but it’s just as simple.

For this tutorial, I am working with the beta release of Vue3 that can be found via the vue-next Github repository.

Alright. Let’s just get straight to it.

What are Vue Global Components?

First off, we have to understand what a Vue3 global component is and why we might want to use one.

Normally, when we want to include a component inside our Vue instance, we register it locally. That normally looks something like this.

<script>
import PopupWindow from '../components/PopupWindow.vue';

export default {
  components: {
    PopupWindow
  }
}
</script>

#web-development #programming #vuejs #technology #javascript #vue3