Использование Vue.js для создания пользовательских Web компонентов

theHTMLway.html

<div id="my-app">
  <p>Introduction text</p>
  <share-buttons gplus="false"/>
</div>

<template id="share-buttons-template">
  <div id="share-buttons">
    <a href="#" @click.prevent="share" v-if="facebook">Facebook</a>
    <a href="#" @click.prevent="share" v-if="twitter">Twitter</a>
    <a href="#" @click.prevent="share" v-if="gplus">Google+</a>
  </div>
</template>

<script src="vue.min.js"></script>
<script src="vue-custom-element.min.js"></script>
<script>
Vue.customElement('share-buttons', {
  template: '#share-buttons-template',
  props: {
    facebook: { type: Boolean, default: true },
    twitter: { type: Boolean, default: true },
    gplus: { type: Boolean, default: true }
  },
  methods: {
    share ($event) {
      window.alert('Share on ' + $event.target.innerHTML);
    }
  }
});
</script>