typewriter-vue

Typing effect component for Vue.js

Features & characteristics:

• NO dependencies,
• multiline support,
• substring replacement (carousel),
• on demand replacement,
• text CSS customization,
• blinking cursor customization.

Install & basic usage

npm install typewriter-vue

<template>
  <div id="app">
    <typewriter
      :replace="replace"
      :type-interval="100"
      :replace-interval="1000"
    >
      <div>Typewriter Vue</div>
    </typewriter>
  </div>
</template>

<script>
import Typewriter from "typewriter-vue";

export default {
  name: "App",
  components: {
    Typewriter,
  },
  data: () => ({
    replace: [
      { from: "Vue", to: "React?" },
      { from: "Typewriter React?", to: "Joking, it`s Vue!" },
    ],
  }),
};
</script>

CodeSandbox

Examples

Replace on demand

<template>
  <div id="app">
    <button @click="replaceOnClick">Click to replace</button>
    <typewriter ref="typewriter">
      <div>Typewriter Vue</div>
    </typewriter>
  </div>
</template>

<script>
import Typewriter from "typewriter-vue";

export default {
  name: "App",
  components: {
    Typewriter,
  },
  methods: {
    replaceOnClick() {
      this.$refs.typewriter.replaceText({
        from: "Typewriter Vue",
        to: "Typing effect component for Vue",
      });
    },
  },
};
</script>

CodeSandbox

Replace last word on demand

<template>
  <div id="app">
    <button @click="replaceOnClick">Click to replace last word</button>
    <typewriter ref="typewriter">
      <div>Typewriter Vue</div>
    </typewriter>
  </div>
</template>

<script>
import Typewriter from "typewriter-vue";

export default {
  name: "App",
  components: {
    Typewriter,
  },
  methods: {
    replaceOnClick() {
      this.$refs.typewriter.replaceLastWord("Vue.js");
    },
  },
};
</script>

CodeSandbox

Text CSS customization

<template>
  <div id="app">
    <typewriter class="typewriter" :type-interval="100">
      <div style="font-size: 30px; color: red; text-decoration: underline">
        Typewriter Vue
      </div>
    </typewriter>
  </div>
</template>

<script>
import Typewriter from "typewriter-vue";

export default {
  name: "App",
  components: {
    Typewriter,
  },
};
</script>

CodeSandbox

Cursor customization

<template>
  <div id="app">
    <typewriter
      class="typewriter"
      :replace="replace"
      :type-interval="100"
      :replace-interval="1000"
    >
      <div>Typewriter Vue</div>
    </typewriter>
  </div>
</template>

<script>
import Typewriter from "typewriter-vue";

export default {
  name: "App",
  components: {
    Typewriter,
  },
  data: () => ({
    replace: [
      {
        from: "Typewriter Vue",
        to: "Typing effect component for Vue",
      },
    ],
  }),
};
</script>

<style>
.typewriter.content *:last-child::after {
  font-size: calc(3em + 20px) !important;
}
</style>

CodeSandbox

API

props

• type-interval Number (optional) default: 75

  Interval between entering letters (ms).

• replace Array (optional) default: []

  Array of objects containing information about strings to be replaced. Object structure:

  • from - String to be replaced,
  • to - String that will replace 'from' value

• replace-interval Number (optional) default: 2000

  Interval between replacing in (ms).