Vue Typewriter Component

This Vue component simulates a typewriter effect by typing and erasing sentences with customizable typing speed, delay, caret style, and looping options. The component is built with the Vue 3 Composition API and TypeScript.

Demo Page

https://dmncodes.github.io/vue-typing/

Features

• Dynamic Typing: Type out a list of sentences with random typing speed within a specified range.
• Erasing: Erase sentences after typing, with configurable speed and delay.
• Looping: Option to loop through the sentences indefinitely.
• Customizable Caret: Customize the caret character and its appearance.
• Event Emission: Emits an event after typing each sentence, useful for triggering additional actions.

Usage

Here’s how you can use the Typewriter component in your Vue application:

1. Install

With NPM Package Manager

npm i @dmncodes/vue-typing

With Yarn

yarn add @dmncodes/vue-typing

2. Import the Component

You can import the component into your Vue component:

import VueTyping from "@dmncodes/vue-typing"

3. Use the Component in Your Template

<template>
  <VueTyping 
    :sentences="['Hello World!', 'Welcome to Vue.js']"
    :minTypeSpeed="50"
    :maxTypeSpeed="150"
    :eraseSpeed="100"
    :eraseDelay="1500"
    :writeDelay="0"
    caret="_"
    :loop="true"
    @sentence:typed="onSentenceTyped"
  />
</template>

<script setup>
function onSentenceTyped(sentence: string) {
  console.log(`Typed sentence: ${sentence}`);
}
</script>

4. Props

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | sentences | string[] | [] | List of sentences to type out. | | minTypeSpeed | number | 50 | Minimum typing speed in milliseconds. | | maxTypeSpeed | number | 150 | Maximum typing speed in milliseconds. | | eraseSpeed | number | 100 | Speed of erasing each character in milliseconds. | | eraseDelay | number | 1500 | Delay before starting to erase in milliseconds. | | writeDelay | number | 0 | Delay before starting to type the next sentence in milliseconds. | | caret | string | _ | Character to display as the caret. | | loop | boolean | false | Whether to loop through the sentences indefinitely. |

5. Events

| Event Name | Payload | Description | | ---------- | ------- | ----------- | | sentence:typed | string (sentence) | Emitted after a sentence is fully typed out. |

6. Styling

The component comes with some basic styles for the caret and typing animations. You can customize these styles by overriding the CSS classes:

.dmn-typing span.caret {
  color: inherit;
  animation: blink 1s infinite;
}

.dmn-typing span.typing {
  animation: none;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

7. Testing

Unit tests are written using Vitest and Vue Test Utils. The tests cover:

• Typing the sentences correctly.
• Erasing sentences after typing.
• Emitting events after each sentence is typed.
• Correct application of the caret classes and animations.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request or open an issue.

License

This project is licensed under the MIT License.