How to publish Vue Components via npm

If you use Vue.js framework in your project, it is easy to share components as vue files. This is one of solution but if the component is imported in the other project, sharing it via npm may be helpful for you. This post explains how to create and publish Vue Components.

Install vue-sfc-rollup

What is the most easiest setting I think is use vue-sfc-rollup. The official document also recommends to customize this repository.

This recipe is the result of a lightning talk given by Mike Dodge at VueConf.us in March 2018. He has published a utility to npm which will quickly scaffold a sample SFC using this recipe. You can download the utility, vue-sfc-rollup, from npm. You can also clone the repo and customize it.

https://github.com/team-innovation/vue-sfc-rollup

So let’s create a project directory using his library.

# Create project directory
npx vue-sfc-rollup

If you choose Single Component, note that the you should set the npm name your component. Your initial Vue Component file will be automatically generated under ./src/ directory.

Auto Draft

Edit your component

Edit the component file as to be your component. You can modify your code with hot reload module. Note that you should install Vue CLI 3.

# In your project root
vue serve ./src/your-component.vue

Build your component

After your editing, type build command.

# In your project root
npm run build

Build files will be generated in /dist folder with default config. These files are supported for CommonJS/UMD and ES6 javascript. I recommend to publish all of them.

Publish

Now that you have files to publish your component to npm. Before publishing, if you haven’t registered your account in npm yet, get it done to visit here. Next is to add your npm account on terminal.

npm assuser

package.json

Edit default setting to be yours. The ‘files’ property in the json indicates exact files/directories to share. If you want to share your vue file itself, include it. You can check other properties precisely here.

This is all about. It is time to type the following command for publish.

npm publish

vue-hashtag-textarea

I created a library of Vue Component called vue-hashtag-textarea. I posted a past article on how vue-hashtag-textarea was implemented before as well.

sample image

This vue-hashtag-textarea supports to change text color, hashtag color and background color of hashtag. Set properties as you like at the component. The below is an example.

sample
sample
sample
sample