vue-cli build a lib from component and import it

Question

I'm using vue-cli for build my lib with this command:

"build": "vue-cli-service build --target lib --name myLib ./src/component.vue"

How can I import my component from the dist folder after the build?

If I import from path-to-myLib/src/component.vue, everything is fine! But the code below does not work:

// undefined
import { component } from 'path-to-myLib/dist/myLib.umd.js' 
// undefined
import myComponent'path-to-myLib/dist/myLib.umd.js' 
// result: https://i.stack.imgur.com/xHSzL.png
import * as myComponent'path-to-myLib/dist/myLib.umd.js'

I cannot understand what the problem is.

In order to import a library it has to be exported from your main.js or the mylib.umd.js first. You should include (import) the .vue component inside that file and then export it from there. Check my answer one how to import vue components here: stackoverflow.com/questions/47754244/… — samayo
Did u give your components a name? It is required. Component.vue should have name attribute with value of the component you are trying to import — samayo
I meant inside your component.vue like in this example github.com/samayo/vuejs-hello-app/blob/master/src/components/…. If not check my previous link or the github code, the SO link shows step-by-step process on how to make the lib and the github code shows the finished product. You can mirror-check your code to see what is missing — samayo
Ah, sorry for that. Wish I could help but I had the same issue when building the library so your problem is not that far apart — samayo

Alessio Breviglieri Alessio Breviglieri · Accepted Answer · 2020-04-20T15:36:23

Wherever you'd like to use your built component, just import it like this:

import MyComponent from 'path/to/MyComponent.umd.js'

This syntax was not mentioned in your attempts, so I guess it is just an import statement typo.

vue-cli build a lib from component and import it

2 Answers