NPM is a package registry for Node based projects , which we used to install dependencies for our project by issuing npm i command. We can publish private and public JavaScript packages to NPM and can be useful for other developers.

Prepare Vue SFC

The first step to publish a Vue SFC(Single FIle Component) is to prepare the component and Test it. We need to prepare

  • SFC
  • Test Component
  • Package.json

Package.json is important this is where we specify our build file,package name/scope for publishing. To make these things easy we can use a rollup utility , vue-sfc-rollup . First we need to install it globally.

npm install -g vue-sfc-rollup

Create first component

Go to the terminal issue the sfc-init and choose single component (SFC) and other desired configuration. After the completion of the project setup open the folder , there you can see two important folder

  • src - the source for component
  • dev - the component test project

Feel free to remove the component body and add yours. What next ?

Test

To test the component run

npm run serve   

Build

If everything is went fine , we are ready to build the project

npm run build

That's it. We can now publish the Vue SFC to NPM and that is not the topic of this post, may be in another post tagged npm-publish

following npm posts may help you

​ ​

This free site is ad-supported. Learn more