Importing self-made library into vue project

user_2419297 0
Viewed 1268

Intro: I've generated two projects with vue-cli ~4.2.0: parent-app and dummylib

Goal: to create DummyButton.vue component in dummylib project and import it in parent-app project.

What I've done:

Followed this tutorial.

In dummylib's package.json I've inserted:

"main": "./dist/dummylib.common.js",

and build-lib script:

"build-lib": "vue-cli-service build --target lib --name dummylib src/main.js",

dummylib's main.js:

import DummyButton from './components/DummyButton.vue'

export default DummyButton

Also I've created DummyButton.vue and now vue serve src/components/DummyButton.vue successfully renders DummyButton component and npm run build-lib generates dist folder with dummylib.common.js

In parent-app project I've made npm i ../dummylib and it has been added to package.json:

"dependencies": {
  ...
  "dummylib": "file:../dummylib",
  ...
},

Problem:

When I try to start parent-app with npm run serve a lot of linting errors occurs in ../dummylib/dist/dummylib.common.js. As far as i understand, ESlint should not even try to process dummylib.common.js, but it does and it results in ~2000 errors.

vue-cli vuejs2 eslint vue.js javascript
1 Answers

I tried the same tutorial a while ago. To fix it: in the main.js of the library I had to do has to do this:

const Components = {
  DummyButton
};

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name]);
});

export default Components;

instead of 

export default DummyButton

Also did you remember to import the lib into your parents apps main.js

import DummyLib from "DummyLib";
Vue.use(DummyLib);

You can also import straight into a component like so:

import DummyLib from "DummyLib";
export default {
  components: {
    ...DummyLib
  },
  //... rest of vue file script ...
}
user_86901610
Related