typewriter-directive.vue.ts

import type { Directive, DirectiveBinding } from "vue";

let interval: number;

const write = (
  el: HTMLElement,
  binding: DirectiveBinding<Array<string> | string>
) => {
  const { value } = binding;

  let direction = "inc";
  let sliceTo = 0;
  let paused = false;

  const queue: string[] = typeof value === "string" ? [value] : [...value];

  // This class is used to make a blinking cursor requires the import of typewriter.css
  el.classList.add("typewriter");

  // Start of loop
  interval = setInterval(() => {
    // only makes updates if not paused
    if (!paused) {
      // Sets typing to increment and rotates queue
      if (sliceTo === 0) {
        direction = "inc";
        queue.push(queue.shift() ?? "");
      }

      // Sets typing to delete
      if (sliceTo >= queue[0].length) {
        direction = "dec";
        paused = true;
        setTimeout(() => {
          paused = false;
        }, 1500);
      }

      // Updates element to have correct content
      el.innerText = queue[0].slice(0, sliceTo);
      sliceTo >= 0 && sliceTo < queue[0].length && direction === "inc"
        ? sliceTo++
        : sliceTo--;
    }
  }, 200);
};
export default {
  mounted: write,
  beforeUnmount: () => clearInterval(interval),
} as Directive;

typewriter.css

.typewriter:after {
    content: '|';
    animation: 1s blink infinite;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }

}