Convert a Single File Component Into a Vue Package and Publish It to NPM.

Neha Soni

Published in

Easy coding

5 min readJun 7, 2021

If you ever faced any snag while building and publishing an NPM package, the article will surely help you.

Hello, Readers

Recently I have achieved adequate knowledge of creating and publishing Vue js packages to NPM.
After following this blog you will be skillful to acquire enough apprehension about building and publishing the packages.

We are going to follow a total of 8 steps which might sound to you immeasurably more but trust me you will surely find many interesting things coming to the end.

Let’s plunge into the process.

1. 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.

2. Initiate A New Component-

Let’s create a new component of the name VueElegantButton.vue inside the components directory.

In this component, We are going to create a simple button that will take some props. The component should look like this-

So here, we have developed a single component that is going to be published as a library.

3. Define Entry Point

We need to create an entry point for our package. This entry point will be the first file that 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-

4. Configure the Package.json file

NPM uses a package.json file to get information on how to build this package and also all other fundamental details.

Build command-

We need to create a command which can make a build of the package. This command is as follows-

vue-cli-service build --target lib --name myLib [entry]

Here myLib name is the name you want to specify for your build files, it’s better to use the name of the package i.e we can use vue-elegant-button.
[entry] is our entry file name which is install.js.

Finally, let’s add this command inside the scripts-

"scripts": {
...
"build-library" : "vue-cli-service build --target lib --name vue-elegant-button ./src/install.js",
...
},

You can test if your new build command is working fine by running the following command-

npm run build-library

This should produce the following result-

Files Attribute-

Next, This files attribute determines which files you want to publish at your npm package. Here I prefer to publish the files under the dist directory only.

"files": ["dist/*"],

If you want to publish more files, you can do it like this-

"files": [
  "dist/*",
  "src/*",
  "public/*",
  "*.json",
  "*.js"
],

Referring to the right output file-

Make sure your main attribute is referring to the correct output file.

"main" : "./dist/vue-elegant-button.common.js"

The final package.json-

We can add any necessary information about our package. Here is the finalpackage.json-

You can grasp the knowledge of all properties from here.

5. Update Readme.MD file

The fileREADME.md , 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 only the required instructions to make installation easy for the users.

6. Publish Package to NPM

Login to NPM

If you are not registered already-

npm adduser

If you are already registered-

npm login

If you are already logged in and want to verify the user-

npm whoami

Build and publish

Create a build-

npm run build-library

Publish to NPM-

npm publish --access public

Applause! Your primary package is now at the world’s fingertips and needless to say, everyone will find it at the URL- https://www.npmjs.com/package/vue-elegant-button

7. Use the package

We already have brought up in the readme section how one can install and use this package.

8. Update the Package

Now, you have published the package at NPM but if you do change anything in the code, you would definitely want to publish again with the changes.

If you are not using GitHub-

If you haven’t used GitHub to push the package code then just follow below three steps-

Change the version to the updated one in the package.json file.
Create build-

npm run build-library

Publish the package-

npm publish --access public

You can create a single command of all these three steps instead of running all of them individually.

“publish-package”: “npm run build-library && npm publish --access public”

Add this command in the scripts of the package.json , and run it to publish the package.

npm run publish-package

If you are using GitHub-

If you are pushing the code to GitHub then before publishing the package we need to make sure that code should be committed to GitHub and the working directory is clean. Follow the below steps-

Stage the changes-

git add . or git add -A

Commit the code-

git commit -m ‘fix-bug-in-the-package’

Create a single command as we did above-

“publish-package”: “npm run build-library && npm version patch -m \”build: release %s\” && npm publish --access public”

This command will auto-increment the version by 1 in the package.json file. You can grasp more about npm version commands from here.

Run the new command to publish to NPM

npm run publish-package

Push code in the respected branch-

git push origin <branch_name>

We have a GitHub repository linked with NPM which creates tags for each version, you can check the latest tag.

git tag

So if you want to push the changes with tags, then run this command-

git push --follow tags

Closure

Following the above same steps, I have published three Vuejs packages. Here is the list-

Check out the following two as well-

Give them a try by installing them on your websites and contribute with me.

If you enjoyed this article, share it with your friends and colleagues!

Let’s start your first package’s work today and now.

Lots of luck!