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