Using a javascript library/plugin within Vue code

Question

So, I am trying to use the pretty neat component vue-social-sharing but this is the first time I am using such a libaray and am not sure how to set it up properly.

I have installed it via NPM, but then get lost on the first section "Usage, Loading the library"

Specifically, it says

"Browserify / Webpack"
var SocialSharing = require('vue-social-sharing');
Vue.use(SocialSharing);

But, I am not exactly sure where that goes, how it is setup etc. Do I set it in some Webpack file somewhere? or create its own file and import? Or, if it is in a normal vue file, which level? per component, per view? on the App.vue level?

I just don't really understand how exactly to set this up.

Any help would be great, I am completely lost as this is my first time using external libraries like this.

Thanks!

Boussadjra Brahim · Accepted Answer · 2019-01-11 13:34:09Z

2

That code you should put it inside main.js file which will initialize using that plugin (library):

import Vue from 'vue';
var SocialSharing = require('vue-social-sharing');
Vue.use(SocialSharing);

new Vue({
    ....
  })

and the following code you could put it inside any child component template:

<social-sharing url="https://vuejs.org/" inline-template>
 <div>
    <network network="facebook">
      <i class="fa fa-fw fa-facebook"></i> Facebook
   </network>
    ....
 </social-sharing>

answered Jan 11, 2019 at 13:34

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

3 Comments

KJParker Over a year ago

Ah ok great. I will try that, thank you. Do I not need to import it anywhere at all with the typical "Import X from X" ? And also, he says "HTML: <script src="/dist/vue-social-sharing.min.js"></script>" is that a "one or the other" or do I also need to add that somewhere?

Boussadjra Brahim Over a year ago

var SocialSharing = require('vue-social-sharing'); it's equivalent to import x from y and we should respect the syntax given in the library documentation to avoid any potential issue

KJParker Over a year ago

Gotcha, thank you so much. It is now working and I understand using libraries a little better. I appreciate it!

Collectives™ on Stack Overflow

Using a javascript library/plugin within Vue code

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related