Convert a Single File Component Into a Vue Library and Publish It to NPM.
If you ever faced any snag while building and publishing an NPM package then this article is surely gonna help you.
Neha Soni , 02 June, 2021
Recently we have achieved adequate knowledge of creating and publishing Vue js packages to NPM.
We strongly anticipate that after following this blog you will be skilful to acquire enough apprehension about building and publishing the packages.
Let’s plunge into the process and you will surely find many interesting things coming to the end.
# Set Up A Vue Project-
Let’s set up a new project first-
vue create vue-elegant-button
You can grasp more about setting up Vue projects from here.
Push the Project to Github (Optional) Vue CLI project by default comes with an initialized git repository. So, you only need to create a new repository at your Github account and push the changes by following these guidelines.
# Fabricate A New Component-
Let’s create a new component of nameVueElegantButton.vueinside the components directory.
In this component We are going to create a simple button which will take some props. The component should look like this-
So here, we have developed a single component which is going to be published as a library.
# Entry Point using Install Method
We need to create an entry point for our package. This entry point will be the first file which gets executed when someone installs the package. This entry file should contain an install method, which basically registers all the components we are using in our application. Create a new file name install.js in your src directory, and modify it like this-
# Configure Package.json file
NPM uses a package.json file to get information on how to build this package and also all other fundamental information.
We need to create a command which can make a build of the package. This command is as follows-
We can add the necessary information about our package in the package.json file. Here is the package.json file of our package-
You can grasp the knowledge of all properties from here.
# Update Readme.md file
The README.md file comprises the instructions which users can follow while installing the package. You can find many examples to create a good readme but for now, just add some sufficient instructions in README.md to make installation easy for the users.
# Publish Package to NPM
Login to NPM
If you are not registered already-
If you are already registered-
If you are already logged in and want to verify the user-