An extremely minimal way to publish your Vue component. You already have your project. I assume and hope you are using vue-cli 3.0. If not, immediately switch to it, vue create mypackage and port your project into the new structure.

To get the build for your project, you use the special lib build target to the vue-cli-service build subcommand. You can invoke this as such:

amoe@cslp019129 $ ./node_modules/.bin/vue-cli-service build --target lib --name amoe-butterworth-widgets src/components/TaxonSelect.vue

Here, amoe-butterworth-widgets is the name of the library that you intend to publish it. In this case, I'm publishing it as an unscoped public package, this is just the regular form of npm publishing that you all know and (hah) love.

TaxonSelect.vue will be exposed as the default export of the build module.

The build will produce several files under the dist subdirectory. You are looking for the UMD build. You'll find a file dist/amoe-butterworth-widgets.umd.js. Now you need to add a key to package.json.

{
...
    "name": "amoe-butterworth-widgets",
    "main": "dist/amoe-butterworth-widgets.umd.js",
    "version": "0.1.0",
    "license": "MIT",
...
}

It's wise to set a license and to obey semver as appropriate.

Now you need to be logged in before you can actually publish. Run npm adduser.

Once you've done this, simply run npm publish. Your package will be pushed up and made available at http://npm.js.com/package/mypackage, where mypackage was specified in the name field of package.json.

When someone runs npm install mypackage, they'll get what is more-or-less a copy of your source tree. As far as I can see, npm doesn't attempt to clean your tree or reproduce your build in any way. So make sure that anything you don't want to be public is scrubbed before running npm publish.

When the user wants to actually use your component, TaxonSelect.vue is the default export, as mentioned above. So to use it, they just type import TaxonSelect from 'mypackage', and TaxonSelectis then a component that they can register in their components object. There are ways to export multiple components from a module, but that's outside the scope of this article.