20

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.

Nmk
  • 1,281
  • 2
  • 14
  • 25
Илья Зеленько
  • 7,509
  • 3
  • 44
  • 55
  • 1
    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: https://stackoverflow.com/questions/47754244/how-to-create-and-publish-a-vuejs-component-on-npm/47757050#47757050 – samayo Aug 09 '18 at 17:35
  • I tried and through this code: `import component from './component.vue' export default component` Imports gives same result. Mabe it vue-cli bug? – Илья Зеленько Aug 09 '18 at 17:48
  • 1
    Try `export { foobar }` – samayo Aug 09 '18 at 17:50
  • In this case `import component from 'path-to-myLib/dist/myLib.umd.js'` gives me undefined – Илья Зеленько Aug 09 '18 at 17:52
  • 1
    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 Aug 09 '18 at 17:55
  • You mean that in the import, should I specify the name that I specified in the name attribute? – Илья Зеленько Aug 09 '18 at 18:00
  • 1
    I meant inside your `component.vue` like in this example https://github.com/samayo/vuejs-hello-app/blob/master/src/components/VuejsHelloApp.vue#L9. 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 Aug 09 '18 at 18:04
  • Thank you very much for your time, I really appreciate it. I use `vue-cli-service` and you are `webpack` for build. It seems that I will ask this question in vue-cli on the github – Илья Зеленько Aug 09 '18 at 18:06
  • 1
    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 Aug 09 '18 at 18:07

2 Answers2

1

you must add main to your package.json like this "main":"path-to-myLib/dist/myLib.umd.js", pointing to the generated umd file and then use import {component} from 'library' and use in library library name

giorgiosaud
  • 526
  • 3
  • 6
0

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.

Alessio Breviglieri
  • 133
  • 7