Buttons to share a website to Diaspora* or Mastodon

anything.vue

<template>
  <div class="page">
    <shareDiaspora></shareDiaspora>
    <shareMastodon v-bind:name="foo"></shareMastodon>
  </div>
</template>

<script>
import ShareMastodon from '@/components/share-mastodon'
import ShareDiaspora from '@/components/share-diaspora'
export default {
  name: 'Something',
  data () {
    return {
      foo: 'bar'
    }
  },
  components: {
    ShareMastodon,
    ShareDiaspora
  }
}
</script>

<style scoped>
</style>

share-diaspora.vue

<template>
  <div class="sharebox">
    <v-btn flat @click="share()">
      <v-icon>fa fa-diaspora</v-icon>&nbsp;Share on Diaspora*
    </v-btn>
  </div>
</template>

<script>
export default {
  name: 'ShareDiaspora',
  methods: {
    share: function () {
      let url = `https://share.diasporafoundation.org/?url=${encodeURIComponent(location.href)}&title=${encodeURIComponent(document.title)}`
      window.open(url, 'das', 'location=no, links=no, scrollbars=no, toolbar=no, width=620, height=550')
    }
  }
}
</script>

<style scoped>
.sharebox {
  display: inline-block;
}
</style>

share-mastodon.vue

<template>
  <div class="sharebox">
    <v-btn flat @click.native.stop="dialog = true">
      <v-icon>fa fa-mastodon</v-icon>&nbsp;Toot it on Mastodon
    </v-btn>
    <v-dialog v-model="dialog" max-width="360">
      <v-card>
        <v-card-title class="headline">Mastodon instance</v-card-title>
        <v-card-text>
          Enter the address of your Mastodon instance
            <v-text-field
              name="address"
              label="Instance's address"
              id="addressInstance"
              v-model="address"
            ></v-text-field>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat @click.native="dialog = false">Cancel</v-btn>
          <v-btn flat @click.native="share()">Toot it</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  name: 'ShareMastodon',
  props: [
    'name'
  ],
  data () {
    return {
      dialog: false,
      address: 'https://'
    }
  },
  methods: {
    share: function () {
      this.dialog = !this.dialog
      window.open(`${this.address}/share?text=${name} ${window.location.href}`, '__blank')
    }
  }
}
</script>

<style scoped>
.sharebox {
  display: inline-block;
}
</style>