create , publish vuejs component on npm using vue/cli version 4 and use it in typescript based class style vuejs project

Question

i am learning vuejs and i am using latest versions of it like vue/cli version 4.x.x and now i want to perform a task which is like:

1. I need to create a simple header using vue/cli version 4.x.x which will take an array inside headers variable as a props.

2. Now, i want to publish it over npm.

3. Next i will be creating another vue project which will be using typescript and as a class based style and use my npm package create in 2nd step in this project.

i have followed several articles to complete this approach. link of which is mentioned below How to create and publish a Vuejs component on NPM

Another article is this: https://dev.to/amroessam/publish-your-first-npm-package-vue-263h

Last article is this: https://v2.vuejs.org/v2/cookbook/packaging-sfc-for-npm.html

Even though i am able to create header and publish it over npm but i am unable to use that npm package at all it gives the error.

This dependency was not found:

• header-bell-app in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/UserComponent/UserComponent.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save header-bell-app

i created my header package with the name header-bell-app and installed it as well but still it was giving me error when i was trying to import it somewhere.

Below is the code and screenshot of my header-bell npm package:

    entry.js
import component from "./headerComponent.vue";

function install(Vue) {
  if (install.installed) return;
  install.installed = true;
  Vue.component("header-component", component);
}

const plugin = {
  install
};

let GlobalVue = null;
if (typeof window !== "undefined") {
  GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
  GlobalVue = global.vue;
}

if (GlobalVue) {
  GlobalVue.use(plugin);
}

component.install = install;

export default component;




HeaderComponent.vue

<template>
  <div>
    <div class="header">
      <div class="header-right">
        <a v-for="header in headers" v-bind:key="header.id" v-bind:href="header.url">{{header.name}}</a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "HeaderComponent",
  props: {
    headers: []
  },
  mounted() {}
};
</script>
<style scoped>
/* Style the header with a grey background and some padding */
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

/* Style the header links */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link*/
.header a.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}
</style>




rollup.config.js

import vue from "rollup-plugin-vue";
import buble from "rollup-plugin-buble";
import commonjs from "rollup-plugin-commonjs";

export default {
  input: 'src/entry.js', // Path relative to package.json
  output: {
      name: 'HeaderComponent',
      exports: 'named',
  },
  plugins: [
      commonjs(),
      vue({
          css: true, // Dynamically inject css as a <style> tag
          compileTemplate: true, // Explicitly convert template to render function
      }),
      buble(), // Transpile to ES5
  ],
};



package.json

{
  "name": "header-bell",
  "version": "0.1.2",
  "main": "dist/headercomponent.umd.js",
  "module": "dist/headercomponent.esm.js",
  "unpkg": "dist/headercomponent.min.js",
  "browser": {
    "./sfc": "src/HeaderComponent.vue"
  },
  "files": [
    "dist/*",
    "src/*",
    "attributes.json",
    "tags.json"
  ],
  "vetur": {
    "tags": "tags.json",
    "attributes": "attributes.json"
  },
  "scripts": {
    "build": "npm run build:unpkg & npm run build:es & npm run build:umd",
    "build:umd": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format umd --file dist/headercomponent.umd.js",
    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es --file dist/headercomponent.esm.js",
    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife --file dist/headercomponent.min.js"
  },
  "devDependencies": {
    "cross-env": "^5.2.0",
    "minimist": "^1.2.0",
    "rollup": "^1.14.4",
    "rollup-plugin-buble": "^0.19.6",
    "rollup-plugin-commonjs": "^9.3.4",
    "rollup-plugin-replace": "^2.2.0",
    "rollup-plugin-uglify-es": "0.0.1",
    "rollup-plugin-vue": "^4.7.2",
    "vue": "^2.6.10",
    "vue-template-compiler": "^2.6.10"
  }
}

And i am using above package in my another project like below after installing header-bell

Now its giving me an error that

Could not find a declaration file for module 'header-bell'. 'd:/Alok/Work/References/interceptor-boilerplate/node_modules/header-bell/dist/headercomponent.umd.js' implicitly has an 'any' type. Try npm install @types/header-bell if it exists or add a new declaration (.d.ts) file containing `declare module 'header-bell';

and error in console while using HeaderComponent is in below image

I hope this will be enough evidence to correct my things. i will thankful if you can provide me with the best solution for this.