{"id":696,"date":"2022-04-02T10:07:22","date_gmt":"2022-04-02T10:07:22","guid":{"rendered":"http:\/\/shabeebk.com\/blog\/?p=696"},"modified":"2022-04-02T18:26:59","modified_gmt":"2022-04-02T18:26:59","slug":"build-a-vue-js-component-library-and-push-to-npm","status":"publish","type":"post","link":"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/","title":{"rendered":"Build a Vue.js component library and push it to npm : part 1"},"content":{"rendered":"\n<p>I have been working with Vue for a long time, Sometimes I have to create vue project as a library, and I have to use it in multiple projects, Here I am explaining  how to create a small Vue js (vue 2) component library, push to npm and use in our project<\/p>\n\n\n\n<p>we are going to create two Vue.js apps:<\/p>\n\n\n\n<ul><li>A library or package that will contain a basic component<\/li><li>An app that will use the just created library<\/li><\/ul>\n\n\n\n<h2>Prerequisites<\/h2>\n\n\n\n<p>I\u2019m going to use&nbsp;npm&nbsp;as the package manager and&nbsp;vueCLI&nbsp;to create and build both our library and app.<\/p>\n\n\n\n<h2>Project Setup<\/h2>\n\n\n\n<p>I created a blog to set up a Vue js project in my previous article briefly, please refer <a href=\"http:\/\/shabeebk.com\/blog\/simple-vue-2-example-todo-list\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>. Here I am pasting all the comments I used.<\/p>\n\n\n\n<h2>APP setup<\/h2>\n\n\n\n<p>Let&#8217;s create our app  first<\/p>\n\n\n\n<p><code><code>vue create vue-app<\/code><\/code><\/p>\n\n\n\n<p>Then we can<code> cd vue-app<\/code> and <code>npm run serve<\/code> to run the server.<br>This will run our server in <code><a href=\"http:\/\/localhost:8080\/\">http:\/\/localhost:8080\/<\/a><\/code><\/p>\n\n\n\n<h2>Library setup<\/h2>\n\n\n\n<p>Let&#8217;s create a basic project for the library now<\/p>\n\n\n\n<p><code>vue create sb-vue-component-library<\/code><\/p>\n\n\n\n<p>Then we can<code> cd vue-app<\/code> and <code>npm run serve<\/code> to run the server<br>This will run our server in <a href=\"http:\/\/localhost:8081\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/localhost:8081\/<\/a> (since our app is running on 8080)<\/p>\n\n\n\n<p>Now let&#8217;s create a button component and add functionality <\/p>\n\n\n\n<p>Lets us remove <code>component\/Helloworld.vue <\/code>and create a new file <code>component\/Button.vue<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template&gt;\n  &lt;div&gt;\n    &lt;button @click=\"incrementCount\" class=\"simple-button\"&gt;{{ text }}&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nexport default {\n  name: \"myButton\",\n  data() {\n    return {\n      buttonCount: 0,\n    };\n  },\n  computed: {\n    times() {\n      return this.buttonCount &gt; 1 ? \"times\" : \"time\";\n    },\n    text() {\n      return `Button clicked ${this.buttonCount} ${this.times}`;\n    },\n  },\n  methods: {\n    incrementCount() {\n      this.buttonCount += 1;\n    },\n  },\n};\n&lt;\/script&gt;\n\n&lt;!-- Add \"scoped\" attribute to limit CSS to this component only --&gt;\n&lt;style scoped&gt;\n.simple-button {\n  background: #1966c0;\n  color: white;\n  min-height: 30px;\n  padding: 10px 20px;\n  font-size: 18px;\n  font-weight: 600;\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>Letus creat a <code>index.js<\/code> inside component and export above component from there.<\/p>\n\n\n\n<p>This will help us when we are adding more component and use as library<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><code>component\/index.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import Button from \".\/Button.vue\";\nexport default { Button };<\/code><\/pre>\n\n\n\n<p>In App.vue, we remove Helloworld and import our button component<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template&gt;\n  &lt;div id=\"app\"&gt;\n    &lt;Button \/&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nimport Button from \".\/components\/Button.vue\";\n\nexport default {\n  name: \"App\",\n  components: {\n    Button,\n  },\n};\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>We can run the server and it will look like below. Every time you click on the button the text should update.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM.png\"><img loading=\"lazy\" width=\"1024\" height=\"205\" src=\"http:\/\/shabeebk.com\/blog\/wp-content\/plugins\/jquery-image-lazy-loading\/images\/grey.gif\" data-original=\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM.png\" alt=\"\" class=\"lazy wp-image-701\" srcset=\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM.png 1024w, http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM-300x60.png 300w, http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM-768x154.png 768w, http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM-788x158.png 788w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><noscript><img loading=\"lazy\" width=\"1024\" height=\"205\" src=\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM.png\" alt=\"\" class=\"wp-image-701\" srcset=\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM.png 1024w, http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM-300x60.png 300w, http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM-768x154.png 768w, http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM-788x158.png 788w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/a><\/figure>\n\n\n\n<h2>Library Build<\/h2>\n\n\n\n<p>Let&#8217;s make a new file <code>lib-setup.js<\/code> in <code>src<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import OurVue from \"vue\";\nimport components from \".\/components\";\n\/\/ import Button from \"@\/components\/Button\";\n\n\/**\n * install function\n *\n * @param {*} Vue parent component vue contructor\n *\/\nfunction install(Vue) {\n  if (OurVue !== Vue) {\n    \/\/ eslint-disable-next-line no-console\n    console.error(\"Multiple instances of Vue detected \");\n  }\n\n  if (install.installed) return;\n  install.installed = true;\n\n  \/\/ registering component to use as  plugin\n  \/\/   if we need to use a single component only use below line only\n  \/\/   Vue.component(\"my-button\", Button);\n  for (const prop in components) {\n    \/\/ eslint-disable-next-line no-prototype-builtins\n    if (components.hasOwnProperty(prop)) {\n      const component = components&#91;prop];\n      Vue.component(component.name, component);\n    }\n  }\n}\n\nconst plugin = {\n  install,\n};\n\nlet GlobalVue = null;\nif (typeof window !== \"undefined\") {\n  GlobalVue = window.Vue;\n} else if (typeof global !== \"undefined\") {\n  GlobalVue = global.vue;\n}\n\nif (GlobalVue) {\n  GlobalVue.use(plugin);\n}\n\nplugin.install = install;\n\nexport default plugin;\n<\/code><\/pre>\n\n\n\n<p>In the above code, we are saying to register all the components in component\/index.js as individual components with defined names in the component file.<\/p>\n\n\n\n<p>If we need only one file to export as a library we can do as below (commented code in above code section)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import myButton from \"@\/components\/myButton\";<\/code><\/pre>\n\n\n\n<p>define the name (here I am giving &#8220;my-button&#8221; as the name of the component) as below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Vue.component(\"my-button\", Button);<\/code><\/pre>\n\n\n\n<h2>Update package with a build script <\/h2>\n\n\n\n<p>in package.json, we can add one more line to build our library using <code>lib-setup.js the <\/code>file. So we can add the below line<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    \"build:lib\": \"vue-cli-service build --name lib --target lib --dest dist src\/lib-setup.js\"<\/code><\/pre>\n\n\n\n<p>Let us add Vue 2 in peerDependencies, so npm will warn if the version is not matching <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"peerDependencies\": {\n    \"vue\": \"^2.6.14\"\n  },<\/code><\/pre>\n\n\n\n<p>Now let&#8217;s build our library, by typing in the comment line<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run build:lib<\/code><\/pre>\n\n\n\n<p>The output of the build process will create a folder <code>dist<\/code>  and  4 files inside, let\u2019s see what are those:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-5.34.17-PM.png\"><img loading=\"lazy\" width=\"1024\" height=\"485\" src=\"http:\/\/shabeebk.com\/blog\/wp-content\/plugins\/jquery-image-lazy-loading\/images\/grey.gif\" data-original=\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-5.34.17-PM.png\" alt=\"\" class=\"lazy wp-image-705\" srcset=\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-5.34.17-PM.png 1024w, http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-5.34.17-PM-300x142.png 300w, http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-5.34.17-PM-768x364.png 768w, http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-5.34.17-PM-788x373.png 788w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><noscript><img loading=\"lazy\" width=\"1024\" height=\"485\" src=\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-5.34.17-PM.png\" alt=\"\" class=\"wp-image-705\" srcset=\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-5.34.17-PM.png 1024w, http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-5.34.17-PM-300x142.png 300w, http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-5.34.17-PM-768x364.png 768w, http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-5.34.17-PM-788x373.png 788w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/a><\/figure>\n\n\n\n<ul><li><strong>dist\/lib.umd.js<\/strong>: UMD (Universal Module Definition) bundle can be consumed directly in the browser as a module.<\/li><li><code><strong>dist\/lib.umd.min.js:<\/strong><\/code> minified UMD bundle.<\/li><li><strong><code>dist\/lib.common.js:<\/code> <\/strong>CommonJS bundle which can be consumed by other bundlers, this file will be used as an entry point.<\/li><li><strong>dist\/lib.css:&nbsp;<\/strong>CSS file which was extracted from the components.<\/li><\/ul>\n\n\n\n<p>Now, we want to add the entry point to our library, we will add it to package.json:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"main\": \".\/dist\/lib.umd.min.js\",<\/code><\/pre>\n\n\n\n<p id=\"7609\">&nbsp;After that, we want to whitelist the files which will be included in our npm package, add this to package.json: (Here we need to add only compiled files in the package)<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\"files\": [ \"dist\/*\"],<\/pre>\n\n\n\n<p>final library packages.json<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"sb-vue-component-library\",\n  \"version\": \"0.1.0\",\n  \"private\": false,\n  \"license\": \"MIT\",\n  \"author\": { \n    \"name\" : \"Shabeeb K\",\n    \"email\" : \"mail@shabeebk.com\",\n    \"url\" : \"http:\/\/shabeebk.com\/\"\n  },\n  \"main\": \".\/dist\/lib.umd.min.js\",\n  \"files\": &#91; \"dist\/*\"],\n  \"scripts\": {\n    \"serve\": \"vue-cli-service serve\",\n    \"build\": \"vue-cli-service build\",\n    \"lint\": \"vue-cli-service lint\",\n    \"build:lib\": \"vue-cli-service build --name lib --target lib --dest dist src\/lib-setup.js\"\n  },\n  \"dependencies\": {\n    \"core-js\": \"^3.8.3\",\n    \"vue\": \"^2.6.14\"\n  },\n  \"devDependencies\": {\n    \"@babel\/core\": \"^7.12.16\",\n    \"@babel\/eslint-parser\": \"^7.12.16\",\n    \"@vue\/cli-plugin-babel\": \"~5.0.0\",\n    \"@vue\/cli-plugin-eslint\": \"~5.0.0\",\n    \"@vue\/cli-service\": \"~5.0.0\",\n    \"eslint\": \"^7.32.0\",\n    \"eslint-plugin-vue\": \"^8.0.3\",\n    \"vue-template-compiler\": \"^2.6.14\"\n  },\n  \"peerDependencies\": {\n    \"vue\": \"^2.6.14\"\n  },\n  \"eslintConfig\": {\n    \"root\": true,\n    \"env\": {\n      \"node\": true\n    },\n    \"extends\": &#91;\n      \"plugin:vue\/essential\",\n      \"eslint:recommended\"\n    ],\n    \"parserOptions\": {\n      \"parser\": \"@babel\/eslint-parser\"\n    },\n    \"rules\": {}\n  },\n  \"browserslist\": &#91;\n    \"&gt; 1%\",\n    \"last 2 versions\",\n    \"not dead\"\n  ]\n}\n<\/code><\/pre>\n\n\n\n<h2>How to import library<\/h2>\n\n\n\n<p>Now you can use the npm package as a dependency in your other projects. <\/p>\n\n\n\n<p>There are multiple ways to use this library in our project.<\/p>\n\n\n\n<h2>1. Using the npm link <\/h2>\n\n\n\n<p> We can consume the library locally by configuring the <code>npm link <\/code>or can just publish it to npm and install it in your project.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm link<\/code><\/pre>\n\n\n\n<p>This will create a global symbolic link to the package. Do you remember we created another sample project to use this library, which is running in <code><a href=\"http:\/\/localhost:8080\/\">http:\/\/localhost:8080\/<\/a><\/code>? Inside that project we can run the <code><code>below the <\/code><\/code>comment and use it in our <code><code>vue-app<\/code><\/code> project<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm link sb-vue-component-library<\/code><\/pre>\n\n\n\n<h2>2. Using Github<\/h2>\n\n\n\n<p>We can push our code to GitHub and install the plugin directly from Github. To do so,<\/p>\n\n\n\n<p>We have to build our library and commit <code>dist<\/code> folder.<\/p>\n\n\n\n<p>I removed <code>\/dist <\/code>from<code> .gitignore<\/code> file and commit all changes to Github.<\/p>\n\n\n\n<p> Now our <code><code>vue-app<\/code><\/code> project we can install the plugin using the below comment<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i https:\/\/github.com\/shabeeb\/sb-vue-component-library.git --save<\/code><\/pre>\n\n\n\n<h2>3. publishing to npm<\/h2>\n\n\n\n<p>Please refer to part 2 of this blog to publish to npm, <a href=\"http:\/\/shabeebk.com\/blog\/create-and-publish-your-first-vue-js-library-to-npm\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a> <\/p>\n\n\n\n<p>once it is published, we can use<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i sb-vue-component-library --save<\/code><\/pre>\n\n\n\n<h2>How to use the library<\/h2>\n\n\n\n<p>Now we have our<code> sb-vue-component-library<\/code> in our package.json and inside our node_modules. Let&#8217;s use it <\/p>\n\n\n\n<p>since our folder name is different from the package name (I changed it since the name is not available in npmjs) we use the package name here.<\/p>\n\n\n\n<p>in <code>main.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import myButton from \"sb-vue-component-library\";<\/code><\/pre>\n\n\n\n<p>Let&#8217;s import CSS also for styles<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import \"sb-vue-component-library\/dist\/lib.css\";<\/code><\/pre>\n\n\n\n<p>and we can use it globally<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Vue.use(myButton);<\/code><\/pre>\n\n\n\n<p>Final <code>main.js<\/code> code looks like <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import Vue from \"vue\";\nimport App from \".\/App.vue\";\nimport myButton from \"sb-vue-component-library\";\nimport \"sb-vue-component-library\/dist\/lib.css\";\n\nVue.config.productionTip = false;\nVue.use(myButton);\n\nnew Vue({\n  render: (h) =&gt; h(App),\n}).$mount(\"#app\");\n<\/code><\/pre>\n\n\n\n<p>We can use it in our <code>App.vue<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;my-button \/&gt;<\/code><\/pre>\n\n\n\n<p>Final App.vue<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template&gt;\n  &lt;div id=\"app\"&gt;\n    &lt;img alt=\"Vue logo\" src=\".\/assets\/logo.png\" \/&gt;\n    &lt;my-button \/&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nexport default {\n  name: \"App\",\n};\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/vue-plugin-use-1.gif\"><img loading=\"lazy\" width=\"480\" height=\"228\" src=\"http:\/\/shabeebk.com\/blog\/wp-content\/plugins\/jquery-image-lazy-loading\/images\/grey.gif\" data-original=\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/vue-plugin-use-1.gif\" alt=\"\" class=\"lazy wp-image-716\"\/><noscript><img loading=\"lazy\" width=\"480\" height=\"228\" src=\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/vue-plugin-use-1.gif\" alt=\"\" class=\"wp-image-716\"\/><\/noscript><\/a><\/figure>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p>We created a button as a library and we used it on our sample project. This can be used in multiple projects and save a lot of development time.<\/p>\n\n\n\n<p>You can find the GitHub repos here:<\/p>\n\n\n\n<p>library: <a href=\"https:\/\/github.com\/shabeeb\/sb-vue-component-library\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/shabeeb\/sb-vue-component-library<\/a><\/p>\n\n\n\n<p>project: <a href=\"https:\/\/github.com\/shabeeb\/vue-library-app\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/shabeeb\/vue-library-app<\/a><\/p>\n\n\n\n<p>Demo: <a href=\"https:\/\/vue-library-app.pages.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/vue-library-app.pages.dev\/<\/a><\/p>\n<div class=\"pvc_clear\"><\/div><p class=\"pvc_stats all \" data-element-id=\"696\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;2,953&nbsp;total views, &nbsp;1&nbsp;views today<\/p><div class=\"pvc_clear\"><\/div>","protected":false},"excerpt":{"rendered":"<p>I have been working with Vue for a long time, Sometimes I have to create vue project as a library, and I have to use it in multiple projects, Here I am explaining how to create a small Vue js (vue 2) component library, push to npm and use in our project we are going [&hellip;]<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"696\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;2,953&nbsp;total views, &nbsp;1&nbsp;views today<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[1],"tags":[77,68,85,84,69,56,75,81,83,82,64,66],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.4.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Build a Vue.js component library and push it to npm : part 1 - shabeeb Blog<\/title>\n<meta name=\"description\" content=\"How to build a vue library and use it in multiple project. Learn how to use it in local npm link or use as published package in npm.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build a Vue.js component library and push it to npm : part 1 - shabeeb Blog\" \/>\n<meta property=\"og:description\" content=\"How to build a vue library and use it in multiple project. Learn how to use it in local npm link or use as published package in npm.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/\" \/>\n<meta property=\"og:site_name\" content=\"shabeeb Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-02T10:07:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-02T18:26:59+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM.png\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"shabeeb\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"http:\/\/shabeebk.com\/blog\/#website\",\"url\":\"http:\/\/shabeebk.com\/blog\/\",\"name\":\"shabeeb Blog\",\"description\":\"A developer blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/shabeebk.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM.png\",\"contentUrl\":\"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM.png\",\"width\":1024,\"height\":205},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/#webpage\",\"url\":\"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/\",\"name\":\"Build a Vue.js component library and push it to npm : part 1 - shabeeb Blog\",\"isPartOf\":{\"@id\":\"http:\/\/shabeebk.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/#primaryimage\"},\"datePublished\":\"2022-04-02T10:07:22+00:00\",\"dateModified\":\"2022-04-02T18:26:59+00:00\",\"author\":{\"@id\":\"http:\/\/shabeebk.com\/blog\/#\/schema\/person\/71832abe654179971635c65c09bceb29\"},\"description\":\"How to build a vue library and use it in multiple project. Learn how to use it in local npm link or use as published package in npm.\",\"breadcrumb\":{\"@id\":\"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/shabeebk.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build a Vue.js component library and push it to npm : part 1\"}]},{\"@type\":\"Person\",\"@id\":\"http:\/\/shabeebk.com\/blog\/#\/schema\/person\/71832abe654179971635c65c09bceb29\",\"name\":\"shabeeb\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/shabeebk.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/0.gravatar.com\/avatar\/9998389cc76a77663881c48f7d4cbba0?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/0.gravatar.com\/avatar\/9998389cc76a77663881c48f7d4cbba0?s=96&d=mm&r=g\",\"caption\":\"shabeeb\"},\"description\":\"Developer,Entrepreneur, software engineer more than that a human being\",\"sameAs\":[\"http:\/\/shabeebk.com\/blog\"],\"url\":\"http:\/\/shabeebk.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build a Vue.js component library and push it to npm : part 1 - shabeeb Blog","description":"How to build a vue library and use it in multiple project. Learn how to use it in local npm link or use as published package in npm.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/","og_locale":"en_US","og_type":"article","og_title":"Build a Vue.js component library and push it to npm : part 1 - shabeeb Blog","og_description":"How to build a vue library and use it in multiple project. Learn how to use it in local npm link or use as published package in npm.","og_url":"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/","og_site_name":"shabeeb Blog","article_published_time":"2022-04-02T10:07:22+00:00","article_modified_time":"2022-04-02T18:26:59+00:00","og_image":[{"url":"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM.png"}],"twitter_misc":{"Written by":"shabeeb","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"http:\/\/shabeebk.com\/blog\/#website","url":"http:\/\/shabeebk.com\/blog\/","name":"shabeeb Blog","description":"A developer blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/shabeebk.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/#primaryimage","inLanguage":"en-US","url":"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM.png","contentUrl":"http:\/\/shabeebk.com\/blog\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-01-at-4.55.17-PM.png","width":1024,"height":205},{"@type":"WebPage","@id":"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/#webpage","url":"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/","name":"Build a Vue.js component library and push it to npm : part 1 - shabeeb Blog","isPartOf":{"@id":"http:\/\/shabeebk.com\/blog\/#website"},"primaryImageOfPage":{"@id":"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/#primaryimage"},"datePublished":"2022-04-02T10:07:22+00:00","dateModified":"2022-04-02T18:26:59+00:00","author":{"@id":"http:\/\/shabeebk.com\/blog\/#\/schema\/person\/71832abe654179971635c65c09bceb29"},"description":"How to build a vue library and use it in multiple project. Learn how to use it in local npm link or use as published package in npm.","breadcrumb":{"@id":"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/shabeebk.com\/blog\/build-a-vue-js-component-library-and-push-to-npm\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/shabeebk.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build a Vue.js component library and push it to npm : part 1"}]},{"@type":"Person","@id":"http:\/\/shabeebk.com\/blog\/#\/schema\/person\/71832abe654179971635c65c09bceb29","name":"shabeeb","image":{"@type":"ImageObject","@id":"http:\/\/shabeebk.com\/blog\/#personlogo","inLanguage":"en-US","url":"http:\/\/0.gravatar.com\/avatar\/9998389cc76a77663881c48f7d4cbba0?s=96&d=mm&r=g","contentUrl":"http:\/\/0.gravatar.com\/avatar\/9998389cc76a77663881c48f7d4cbba0?s=96&d=mm&r=g","caption":"shabeeb"},"description":"Developer,Entrepreneur, software engineer more than that a human being","sameAs":["http:\/\/shabeebk.com\/blog"],"url":"http:\/\/shabeebk.com\/blog\/author\/admin\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/posts\/696"}],"collection":[{"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/comments?post=696"}],"version-history":[{"count":22,"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/posts\/696\/revisions"}],"predecessor-version":[{"id":743,"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/posts\/696\/revisions\/743"}],"wp:attachment":[{"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/media?parent=696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/categories?post=696"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/shabeebk.com\/blog\/wp-json\/wp\/v2\/tags?post=696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}