How to use component with global register in Vue Cli3

Question

This is my folder

+src
  +components
    +Logo.vue
App.vue
main.js

In my main.js I had been import the file

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Logo from '@/components/Logo.vue'

createApp(App).use(router).mount('#app')

This is my App.vue

<template>
  <div>
    <Logo />
  </div>
</template>

<script>
  export default {

  }
</script>

<style lang="scss" scoped>

</style>

And I was stucked at how to link my Logo.vue into App.vue

Answer 1

You can register the component globally by using:

app.component("Logo", Logo);

Example:

...

const app = createApp(App);

// Register component globally
app.component("Logo", Logo);

app.use(router);
app.mount("#app");

...

Read more in the official docs.