[Vue warn]: Failed to resolve component when tried to create global component

Question

I new on Vue Typescript. I've tried to create global components but I got a warning and component not loaded on the template. This how I tried to create global components

App.vue

import { createApp } from "vue"
import App from "./App.vue"
import "./registerServiceWorker"
import "./globalComponents"
import router from "./router"
import store from "./store"

createApp(App)
  .use(store)
  .use(router)
  .mount("#app")

globalComponents.ts

import { createApp } from "vue"

const app = createApp({})

// Forms
app.component("ui-input", () => import("@/components/core/ui/Input.vue"))

Input.vue

<template lang="pug">
.ui-input
  input(v-model="$attrs" v-on="$listeners")
</template>

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
  inheritAttrs: false
})
</script>

Hope you all can help me, Thanks in advance

Answer 1

As of Vue 3, if you create an app using createApp , it will be a standalone Vue App instance. So if you need to add a global component then you will need to add it on the app object created from createApp , here's the code for that:

const app = createApp({});

app.component('my-component-name', MyComponent) // <-- here you can register.

app.mount("#app");

But if there are a lot of components then adding them in the main.ts file will be a mess, so we can create another file, like you did, so:

Your current globalComponents.ts

import { createApp } from "vue"

const app = createApp({})

// Forms
app.component("ui-input", () => import("@/components/core/ui/Input.vue"))

The Problem

But notice here's a mistake. What is it? You created another app using createApp . As I referred earlier that if you need to create a global component, you can only create on the same instance.

Fix

As we know the problem here is that we are creating another instance, which is again a new and standalone instance, so we need to figure out the way we can have the same app instance in globalComponents.ts as well, so we will pass the app from main-ts to globalComponents.ts , like:

globalComponents.ts

import { App } from "vue";

// register components
export const registerComponents = (app: App): void => {
    app.component("ui-input", () => import("@/components/core/ui/Input.vue"));
}

And now you can call registerComponents in main.ts as:

main.ts

const app = createApp(App)
    .use(store)
    .use(router);

registerComponents(app); // <-- here you go

app.mount("#app");

You will still get something like:

[Vue warn]: Invalid VNode type: undefined (undefined).

You can read more here about how to define an async component in vue 3. To fix that error you will need to wrap your import in defineAsyncComponent as:

globalComponents.ts

import { defineAsyncComponent } from "vue";

// register components
export const registerComponents = (app) => {
  app.component(
    "ui-input",
    defineAsyncComponent(() => import("@/components/Input.vue"))
  );
};