Vue-Social-Sharing

by menteora

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify/dist/vuetify.min.css">
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<script src="https://rawgit.com/nicolasbeauvais/vue-social-sharing/master/dist/vue-social-sharing.min.js"></script>
<div id="app">
      <social-sharing url="https://vuejs.org/"
                      title="The Progressive JavaScript Framework"
                      description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
                      quote="Vue is a progressive framework for building user interfaces."
                      hashtags="vuejs,javascript,framework"
                      twitter-user="vuejs"
                      v-cloak inline-template>
        <div>
          <ul>
            <li>
              <network network="email" id="email"><v-btn>
                <i class="fa fa-fw fa-envelope"></i> Email</v-btn>
                </network>
            </li>
            <li>
              <network network="facebook" id="facebook"><v-btn>
                <i class="fa fa-fw fa-facebook"></i> Facebook</v-btn>
              </network>
            </li>
            <li>
              <network network="googleplus" id="googleplus">
                <i class="fa fa-fw fa-google-plus"></i> Google +
              </network>
            </li>
            <li>
              <network network="linkedin" id="linkedin">
                <i class="fa fa-fw fa-linkedin"></i> LinkedIn
              </network>
            </li>
            <li>
              <network network="pinterest" id="pinterest">
                <i class="fa fa-fw fa-pinterest"></i> Pinterest
              </network>
            </li>
            <li>
              <network network="reddit" id="reddit">
                <i class="fa fa-fw fa-reddit"></i> Reddit
              </network>
            </li>
            <li>
              <network network="twitter"...

CSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons');
ul {
  padding: 0;
  list-style: none;
}
ul i.fa {
  margin-right: 5px;
}

JavaScript

Vue.use(SocialSharing);
new Vue({
  el: '#app',
  data: {}
});