Skip to content
Advertisement

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:

JavaScript

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

JavaScript

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

JavaScript

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!

Advertisement

Answer

On this line:

JavaScript

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

You probably meant

JavaScript

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

JavaScript

main.js:

JavaScript

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):

JavaScript

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

User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement