The "Hitchhiker Typer" component used on Shelter In Space

Typer.vue

<template>
  <p><span class="start">{{ start }}</span><span class="end">{{ end }}</span></p>
</template>

<script>
export default{
  props: {
    phrase: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      index: 0
    }
  },
  computed: {
    typed() {
      return phrase.substring(0, this.index)
    },
    start() {
      return this.typed.substring(0, this.typed.length - 1)
    },
    end() {
      return this.typed[this.typed.length - 1]
    }
  },
  methods: {
    startTyping() {
      this.typing = setInterval(() => {
        this.index += 1
        
        if (this.index > this.phrase.length) {
          this.stopTyping()
        }
      }, 50)
    },
    stopTyping() {
      clearInterval(this.typing)
    }
  },
  mounted() {
    this.startTyping()
  },
  beforeDestroy() {
    this.stopTyping()
  }
}