Ginhing/vue-tagsinput

How to add as global Vue component?

Closed this issue · 4 comments

mikebronner commented

Hi, thanks for making this vue plugin! I am getting errors when trying to add it as a global vue plugin?

Vue.component('tags-input', require('vue-tagsinput'));

Then using it like this in vueify components:

        <tags-input
            :tags.sync="document.meta.tags"
        ></tags-input>

I get the following browserify errors:

Browserify Failed!: Cannot find module '!!./../node_modules/css-loader/index.js!./../node_modules/vue-loader/lib/style-rewriter.js?id=_v-607a9ed3&scoped=true!./../node_modules/vue
-loader/lib/selector.js?type=style&index=0!./input.vue' from 'node_modules/vue-tagsinput/dist'

(PS: css-loader is installed.)

Ginhing commented

Hi, I have not tested browserify yet. The main file in dist/ seems messed up webpack.
What about required("vue-tagsinput/src/input.vue") instead?

mikebronner commented

Unfortunately the npm package doesn't include the src files. I will try to install via npm from github repo and report back. Thanks :)

mikebronner commented

Yea, unfortunately I cannot install the source files via npm (they are not included in the files section of package.json). I was able to get it to work by manually cloning the repo and pulling in the vue component directly. (I'll leave this issue open, as the original issue -- browserify compatibility -- isn't addressed.) Please feel free to close if you don't plan on incorporating browserify compatibility. :) thanks again for your help!

Ginhing commented

The reason is that the dead code generated by style-loader didn't be removed even in production environment.
https://github.com/webpack/style-loader/blob/cff991ea90a416b44f4fa75c9cd6e1eb2d18b977/index.js#L25

The final output of vue-tagsinput will be optimized some day. And I published 0.3.1 which include the "src/" in this moment. 😅