Skip to content

Instantly share code, notes, and snippets.

@vahidhedayati
Last active November 20, 2019 16:17
Show Gist options
  • Save vahidhedayati/61b146276f59c68ab11b40dce38a959f to your computer and use it in GitHub Desktop.
Save vahidhedayati/61b146276f59c68ab11b40dce38a959f to your computer and use it in GitHub Desktop.
How to publish a vue js plugin to npm

This is a guide after trying to figure out how to publish to npm

After creating a directory

run npm init inside folder you will need a few base files

Answer questions and this will produce a package.json

Follow some of the base files in this folder and update definitions to match your plugin

So this be webpack.config.js README the License file Then in main/the js file and obviously whatever you are trying to make into a plugin

You should find inside a node_modules folder your package name created:

ls  node_modules/\@vahidh/vue-autocompletion/ 
LICENSE  main  package.json  README.md	webpack.config.js

ls  node_modules/\@vahidh/vue-autocompletion/main/
main.js  VueAutocompletion.vue

if you haven't run npm publish before add a use:

npm adduser

follow prompt and you should already be signed up to http://npmjs.com

To install plugin you will need to add scripts to package.json - I have build and build:prod

npm run build

npm run build:prod

To publish locally to another project:

new-project$ npm install /home/vahid/workspace/vh/vue-autocompletion

Above will add a local dependency to your package.json by itself

"vue-autocompletion": "file:../../vh/vue-autocompletion",

This now allows you to test the plugin without publishing to NPM:

To publish

Login first (create account on npmjs)

npm login 

When done from within the plugin folder run:

npm publish --access public

under packages will now be your new package: https://www.npmjs.com/settings/vahidh/packages

Notes on uglify: webpack-contrib/uglifyjs-webpack-plugin#97

Notes on publishing locally: https://medium.com/@the1mills/how-to-test-your-npm-module-without-publishing-it-every-5-minutes-1c4cb4b369be

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment