using npm module without webpack but with inline script vue.js

Question

I am not using webpack, I include vue as external script Something like this:

<script src ="unpckg.com/vue.js-latest"></script>

And I want to use npm module

https://www.npmjs.com/package/vue-context-menu

So I include it like this:

<script src= "https://unpkg.com/[email protected]/vue-context-menu.js"></script>

So how do I use it? Normally I would right:

import contextMenu from 'vue-context-menu'

But it gives me an error now.

Harshal Patil · Accepted Answer · 2018-05-21 14:41:31Z

1

It should be simple:

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src= "https://unpkg.com/[email protected]/vue-context-menu.js"></script>

 <script>
      // This is important
      Vue.component('own-context-menu', window.VueContextMenu);
 </script>

vue-context-menu registers the component on window object as:

window.VueContextMenu = VueContextMenu

Please let me know if it does not help.

edited May 21, 2018 at 14:41

answered May 21, 2018 at 10:21

Harshal Patil

21.5k17 gold badges76 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2950593 Over a year ago

yeah it works, but I wanted actually to have more general solution, imagine that I will want to use anothere module - should I look again at the code of it and try to understand what it does? Sometimes it can be not so clear)

Harshal Patil Over a year ago

Ohh. I understand your concern. Unfortunately, there is no way if the author has not documented it. You have to dig into the source code. Sometimes the author may not care to expose the component for script-based usage as front-end is gearing towards module-based approach and I agree that may be a bad thing. The author may also expose it via some function call for global usage. I knew about your issue because I had used this library some time back.

Collectives™ on Stack Overflow

using npm module without webpack but with inline script vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related