Deploy Vue Component as a NPM Package

• So, Before know the deploy process of npm package I’m frustrated to finding a way to how to deploy vue component as a npm package for using that component by all people and even me in my different projects. so, I spent lot’s of time to find the solution and finally i found few solution that is really to long for me and finally I found one little small way to deploy vue component as a npm package
• Don’t waste more time and let’s know which is a small way i found to deploy vue component in npm.

VITE : front-end tool

• Using vite frontend framework we are deploy vue componant as a npm package

1 .Setup Boilerplate

npm create vite@latest {{component-name}} -- --template vue

2. Create Component by use Everyone

• Now you can see that stucture

• After see structure go to the src/components
• delete exiting component and create a new component like me (my component-name is custom components)
• After create component write component code (I’m creating button component

src/components/custom-component.vue

3. Npm Login

• After Create a vue component time to login npm and before login once’s register npm account and after register try that command on your app cli

npm login

4. Update version and publish

npm version major/minor/patch

NOTE : every time before publish npm package don’t forgot to update a version

npm publish

Horrray! now your npm package is deploy

• Now you can see your npm package in : https://www.npmjs.com/settings/{{your-username}}packages

5. Testing your component in other vue project

• Search your package name in npm and run below command in your new vue project
• In my case package-name is custom-component

npm i {{package-name}}

• Let’s see how to use componant after install package inside a vue project

App.vue