The first time I tried to publish a vue.js component to NPM was to experiment and mimic UI component libraries and frameworks such as Vuetify and Quasar. I wanted to create a design framework on top of a front-end library such as Vue.js and use it in my projects. Though I later gave up on this experiment, I learned that you can publish very powerful (ability to make AJAX requests) and reusable Vue.js components that can be successfully integrated into any other Vue.js application.
This article will outline the steps required to publish your Vue.js components to the NPM registry as well as mention about how to use your published NPM components into a different project. So let’s get started.
Table of Contents
Create Vue.js project
I highly recommend that you create your project with the latest version of Vue CLI. I am using Vue CLI 3 here in this post.
To install Vue CLI
npm install -g @vue/cli
To create a new project
vue create parse-objects
Build your components
Once you have created your project and tested that it works correctly, build your components as you would normally do. In this example let us assume that I create a <Button/> and a <Alert/> component, which I would also like to package in my Vue.js component library and publish to NPM.
Create an entry file
Entry file is usually App.vue in the project. But since we are going to be publishing our components globally it is better to create a new entry file that will have all the other components imported inside it. I will be importing the created components <Button/> and <Alert/> in my new entry file index.js
Next, I create an index.js file in src/components. The file looks as follows:
//index.js
import Vue from 'vue';
import Button from './Button.vue';
import Alert from './Alert.vue';
const Components = {
Button,
Alert,
};
Object.keys(Components).forEach(name => {
Vue.component(name, Components[name]);
});
export default Components;
Once this is done, the next few steps involve updating our package.json file to set up the build and publishing process.
Name your component library
You can declare the name of your component library in the package.json file. This will be the name used by others to install your package using npm.
For example, let us name name our component library as parseobjects
"name": "parseobjects"
Set up the version and private property
Version is the semantic version of your library. You can start with for example 1.0.0 but you will need to bump it every time you update your library and publish to npm.
Private takes boolean values of either true or false. But since you want to make your components publicly available you will need to set private as false, otherwise, the process will fail.
"version": "1.0.0", "private": false,
Add the files attribute
This step specifies what files from our project need to be uploaded to npm when we publish our component library.
Example:
"files": [ "dist/*", "src/*", "public/*", "*.json", "*.js", "plugins/*" ],
Add script to bundle and build the project
Vue cli provides scripts to build targets. You can build a single entry as a library using
vue-cli-service build --target lib --name myLib [entry]
Here myLib is any name that you can provide and [entry] specifies the entry point. If no [entry] is specified, the default is src/App.vue. But we will use the index.js file that we had created earlier.
I will also add a script tag in package.json for this command. Which looks as follows:
"build-bundle": "vue-cli-service build --target lib --name parseobjects ./src/components/index.js"
Running the command npm run build-bundle will generate a similar output
Ref: https://cli.vuejs.org/guide/build-targets.html#library
Also, make sure that your main property in package.json points towards your output file. I will point towards dist/parseobjects.common.js
"main": "./dist/parseobjects.common.js",
Now your package.json might look as follows:
{
"name": "parseobjects",
"version": "1.0.0",
"private": false,
"main": "./dist/parseobjects.common.js",
"files": [
"dist/*",
"src/*",
"public/*",
"*.json",
"*.js",
"plugins/*"
],
"scripts": {
"serve": "vue-cli-service serve --host localhost",
"build": "vue-cli-service build",
"build-bundle": "vue-cli-service build --target lib --name parseobjects ./src/components/index.js"
},
"dependencies": {
...
},
"devDependencies": {
...
}
}
Set up your npm credentials for this project
To register on npm:
npm adduser
To login
npm login
Bundle and create a package for your component library
Run the build-bundle command that we had added to the scripts tag in package.json
npm run build-bundle
Publish your components library to NPM
Run the following command to publish to NPM:
npm publish --access public
And you are done! You have successfully published your component library to NPM! Seatback and enjoy as other developers install your npm package.
Installing your package in a different project
You can import your package as you import any other npm package.
npm i parseobjects
Next, inside a vue.js file, import the library and use the components the same way you use your custom components.
<script>
import parseobjects from ‘parseobjects’;
components: {...parseobjects}
</script>
<template>
<Button/>
<Alert/>
</template>
And that’s it!
This was a simple example, but you can always create more sophisticated components to accept props, slots and also emit events to be handled. Let me know in the comments below if you have tried this or how you are reusing your vue.js components.
Ref:
https://medium.com/@royprins/publish-a-vuejs-component-on-npm-its-not-scary-5c5103fd0dfa
Tags: javascript, npm, vue.js
