title: create , publish vuejs component on npm using vue/cli version 4 and use it in typescript based class style vuejs project
body: <p>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:</p>
  <ol>
  <li><p>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.</p>
  </li>
  <li><p>Now, i want to publish it over npm.</p>
  </li>
  <li><p>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.</p>
  </li>
  </ol>
  <p>i have followed several articles to complete this approach. link of which is mentioned below
  <a href="https://stackoverflow.com/questions/47754244/how-to-create-and-publish-a-vuejs-component-on-npm">How to create and publish a Vuejs component on NPM</a></p>
  <p>Another article is this: <a href="https://dev.to/amroessam/publish-your-first-npm-package-vue-263h" rel="nofollow noreferrer">https://dev.to/amroessam/publish-your-first-npm-package-vue-263h</a></p>
  <p>Last article is this: <a href="https://v2.vuejs.org/v2/cookbook/packaging-sfc-for-npm.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/cookbook/packaging-sfc-for-npm.html</a></p>
  <p>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.</p>
  <blockquote>
  <p>This dependency was not found:</p>
  </blockquote>
  <ul>
  <li>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&amp;type=script&amp;lang=js&amp;</li>
  </ul>
  <p>To install it, you can run: npm install --save header-bell-app</p>
  <p>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.</p>
  <p>Below is the code and screenshot<a href="https://i.stack.imgur.com/dATAq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dATAq.png" alt="in this image i have the structure of code" /></a> of my header-bell npm package:</p>
  <pre><code>    entry.js
  import component from &quot;./headerComponent.vue&quot;;
  
  function install(Vue) {
    if (install.installed) return;
    install.installed = true;
    Vue.component(&quot;header-component&quot;, component);
  }
  
  const plugin = {
    install
  };
  
  let GlobalVue = null;
  if (typeof window !== &quot;undefined&quot;) {
    GlobalVue = window.Vue;
  } else if (typeof global !== &quot;undefined&quot;) {
    GlobalVue = global.vue;
  }
  
  if (GlobalVue) {
    GlobalVue.use(plugin);
  }
  
  component.install = install;
  
  export default component;
  
  
  
  
  HeaderComponent.vue
  
  &lt;template&gt;
    &lt;div&gt;
      &lt;div class=&quot;header&quot;&gt;
        &lt;div class=&quot;header-right&quot;&gt;
          &lt;a v-for=&quot;header in headers&quot; v-bind:key=&quot;header.id&quot; v-bind:href=&quot;header.url&quot;&gt;{{header.name}}&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    name: &quot;HeaderComponent&quot;,
    props: {
      headers: []
    },
    mounted() {}
  };
  &lt;/script&gt;
  &lt;style scoped&gt;
  /* 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;
    }
  }
  &lt;/style&gt;
  
  
  
  
  rollup.config.js
  
  import vue from &quot;rollup-plugin-vue&quot;;
  import buble from &quot;rollup-plugin-buble&quot;;
  import commonjs from &quot;rollup-plugin-commonjs&quot;;
  
  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 &lt;style&gt; tag
            compileTemplate: true, // Explicitly convert template to render function
        }),
        buble(), // Transpile to ES5
    ],
  };
  
  
  
  package.json
  
  {
    &quot;name&quot;: &quot;header-bell&quot;,
    &quot;version&quot;: &quot;0.1.2&quot;,
    &quot;main&quot;: &quot;dist/headercomponent.umd.js&quot;,
    &quot;module&quot;: &quot;dist/headercomponent.esm.js&quot;,
    &quot;unpkg&quot;: &quot;dist/headercomponent.min.js&quot;,
    &quot;browser&quot;: {
      &quot;./sfc&quot;: &quot;src/HeaderComponent.vue&quot;
    },
    &quot;files&quot;: [
      &quot;dist/*&quot;,
      &quot;src/*&quot;,
      &quot;attributes.json&quot;,
      &quot;tags.json&quot;
    ],
    &quot;vetur&quot;: {
      &quot;tags&quot;: &quot;tags.json&quot;,
      &quot;attributes&quot;: &quot;attributes.json&quot;
    },
    &quot;scripts&quot;: {
      &quot;build&quot;: &quot;npm run build:unpkg &amp; npm run build:es &amp; npm run build:umd&quot;,
      &quot;build:umd&quot;: &quot;cross-env NODE_ENV=production rollup --config build/rollup.config.js --format umd --file dist/headercomponent.umd.js&quot;,
      &quot;build:es&quot;: &quot;cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es --file dist/headercomponent.esm.js&quot;,
      &quot;build:unpkg&quot;: &quot;cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife --file dist/headercomponent.min.js&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;cross-env&quot;: &quot;^5.2.0&quot;,
      &quot;minimist&quot;: &quot;^1.2.0&quot;,
      &quot;rollup&quot;: &quot;^1.14.4&quot;,
      &quot;rollup-plugin-buble&quot;: &quot;^0.19.6&quot;,
      &quot;rollup-plugin-commonjs&quot;: &quot;^9.3.4&quot;,
      &quot;rollup-plugin-replace&quot;: &quot;^2.2.0&quot;,
      &quot;rollup-plugin-uglify-es&quot;: &quot;0.0.1&quot;,
      &quot;rollup-plugin-vue&quot;: &quot;^4.7.2&quot;,
      &quot;vue&quot;: &quot;^2.6.10&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.6.10&quot;
    }
  }
  </code></pre>
  <p>And i am using above package in my another project like below after installing header-bell</p>
  <p><a href="https://i.stack.imgur.com/FgfFm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FgfFm.png" alt="enter image description here" /></a></p>
  <p>Now its giving me an error that</p>
  <blockquote>
  <p>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 <code>npm install @types/header-bell</code> if it exists or add a new declaration (.d.ts) file containing `declare module 'header-bell';</p>
  </blockquote>
  <p>and error in console while using HeaderComponent is in below image</p>
  <p><a href="https://i.stack.imgur.com/NIVgJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NIVgJ.png" alt="enter image description here" /></a></p>
  <p>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.</p>