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




You can get more details and how it works. Please visit following links.
https://www.npmjs.com/package/vue-hashtag-textarea
https://github.com/mitsuyacider/vue-hashtag-textarea