CODEWITHSUNDEEP
npmvue.jsbundlebrowserifyvue-component
Harold
Harold

Reputation: 885

Publishing .vue to npm for use with browserify

How can a .vue file (as a parent component with child .vue files) be published to npm so that you can install, require, and use it as a component with browserify as

let component = require('published-vue-component');

I only use browserify; I don't use webpack at all. I thus bundle all .vue files into a single build.js using a vueify transform. All of the information I see currently about this either a.) reads that you should export your main .vue file (doesn't work) or b.) involves webpack.

If you go ahead and bundle the component with a vueify transform and set "main": "the/bundle/path/index.js", it seems that a vueify transform can't work without a template rendering function and thus isn't intended for single components.

If you simply export the parent .vue file, when you require the component you're going to get a syntax error from the first character of the <template> tag.

Upvotes: 0

Views: 582

Answers (1)

dardrone
dardrone

Reputation: 85

If you bundle your component as a umd module, then you can import it into browserify or webpack. Use rollup and this plugin: http://vuejs.github.io/rollup-plugin-vue/

I ran into this issue with my vue-autosuggest library, where browserify users were experiencing issues importing my module.

Check out this example rollup config for inspiration: https://github.com/Educents/vue-autosuggest/blob/master/build/rollup.umd.config.js

Hope this helps!

Upvotes: 0

Related Questions