TweetButton.vue

<template>
  <v-btn
    :color="button.color"
    small
    dark
    @click="open"
  >
    <v-icon
      small
      left
    >
      fab fa-twitter
    </v-icon>
    {{ button.label }}
  </v-btn>
</template>

<script>
const URL_BASE = 'https://twitter.com/intent/tweet'

export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  data: () => ({
    button: {
      color: '#1da1f2',
      label: 'Tweet'
    },
    dialog: {
      width: 550,
      height: 420
    }
  }),
  computed: {
    encodedMessage () {
      return encodeURIComponent(this.message)
    },
    url () {
      return this.encodedMessage ? `${URL_BASE}?status=${this.encodedMessage}` : URL_BASE
    }
  },
  methods: {
    open () {
      const { width, height } = this.dialog
      const top = (screen.height - height) / 2
      const left = (screen.width - width) / 2
      const options = {
        width,
        height,
        top,
        left,
        scrollbars: 'yes',
        resizable: 'yes',
        toolbar: 'no',
        location: 'yes'
      }
      const windowFeatures = Object.entries(options).map(([key, value]) => `${key}=${value}`).join(',')
      window.open(this.url, '_blank', windowFeatures)
    }
  }
}
</script>

Usage

<template>
  <div>
    <div>
      <input
        v-model="message"
        type="text"
      >
    </div>
    <div>
      <tweet-button :message="message" />
    </div>
  </div>
</template>

<script>
import TweetButton from '~/components/TweetButton'

export default {
  components: {
    TweetButton
  },
  data: () => ({
    message: ''
  })
}
</script>