Mounting a Components Library in Vue 3

I am new to Vue.js and trying to migrate a Vue.js 2 migration to Vue.js 3. I have read the Vue.js instructions on how to that carefully; however, the application that I need to migrate contains a Component Library out of Vue.js 2 components that I need to mount in the migrated app aswell.

This is the Vue.js 2 main.js file:

import './styles/imports.scss';
import * as components from './components';
import * as layoutComponents from './layouts';
import 

const ComponentLibrary = {
    install(Vue = {}) {
        // components
        for (const componentName in components) {
            const component = components[componentName];
            Vue.component(component.name, component);
        }
        // layouts
        for (const layoutComponentName in layoutComponents) {
            const layoutComponent = layoutComponents[layoutComponentName];
            Vue.component(layoutComponent.name, layoutComponent);
        }
    },
};

export default ComponentLibrary;

if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(ComponentLibrary);
}

This is the new Vue.js 3 main.ts file I created so far:

import './styles/imports.scss';
import * as components from './components';
import * as layoutComponents from './layouts';
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

const ComponentLibrary = {
    install(App = {}) {
        // components
        for (const componentName in components) {
            const component = components[componentName];
            app.component(component.name, component);
        }
        // layouts
        for (const layoutComponentName in layoutComponents) {
            const layoutComponent = app.layoutComponents[layoutComponentName];
            app.component(layoutComponent.name, layoutComponent);
        }
    },
};

export default ComponentLibrary;

if (typeof window !== 'undefined' && window.App) {
    window.App.use(ComponentLibrary);
}

I am getting the following errors:

layoutComponents – property unknown

for

const layoutComponent = app.layoutComponents[layoutComponentName];

property “App” is not available for the type “Window % typeof globalThis

for

if (typeof window !== 'undefined' && window.App) {
    window.App.use(ComponentLibrary);
}

I am not sure if this is the right way to mount the Component Library in Vue.js 3 so any hints or help would be very much appreciated, thanks in advance!

Answer

On this line:

const layoutComponent = app.layoutComponents[layoutComponentName];

You refer to app.layoutComponents, which is an unknown property of app.

You probably meant

const layoutComponent = layoutComponents[layoutComponentName];

---

As a side note, you could write the lib registration as:

import './styles/imports.scss';
import * as components from './components';
import * as layoutComponents from './layouts';

const Lib = {
  install(app) {
    for (const entry of Object.entries({ 
      ...components,
      ...layoutComponents
    })) {
      app.component(...entry)
    }
  }
};
export default Lib

main.js:

import myLib from './path/to/lib'

const app = createApp(App);
app.use(myLib);
//...
app.mount('#some-id')

---

The above will register the components using their export names, not the component names. If you want to use the declared component names (this means all of them need to have a name, otherwise they’ll error):

for (const component of Object.values({ 
  ...components,
  ...layoutComponents
})) {
  app.component(component.name, component)
}

I would recommend using the export name rather than component name.