Vue3 code example to implement text typewriter effect using TypeIt

What is TypeIt?

TypeItIt is a lightweight and flexibleJavaScriptlibrary, used to achieve the effect of typewriter. It supports a variety of features such as custom typing speed, deletion of text, looping animations, etc. It is ideal for titles, slogans or dynamic text displays.

Official website address:/

Using TypeIt in Vue 3

1. Install TypeIt

First, install TypeIt via npm or yarn:

npm install typeit

or

yarn add typeit

2. Use TypeIt in Vue 3 components

Here is a simple example showing how to use TypeIt in Vue 3 components to achieve a typewriter effect.

Sample code

<template>
  <div>
    <!-- Bind one ref For TypeIt initialization -->
    <h1 ref="typeitElement"></h1>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import TypeIt from 'typeit';

// Get a reference to the DOM elementconst typeitElement = ref(null);

// Initialize TypeIt after component mountonMounted(() => {
  new TypeIt(, {
    strings: ['Welcome to my blog!  ', 'Here are examples of Vue 3 and TypeIt.  '], // Text to be displayed    speed: 100, // Typing speed (unit: milliseconds)    loop: true, // Whether to loop    breakLines: false, // Is it allowed to wrap  }).go(); // Start the animation});
</script>

<style scoped>
h1 {
  font-size: 2.5rem;
  color: #333;
}
</style>

3. Code parsing

• Introducing TypeIt：

  • passimport TypeIt from 'typeit';Introduce the TypeIt library.

• Bind DOM elements：

  • Using Vue 3refBind a DOM element (such as<h1>), used for TypeIt initialization.

• Initialize TypeIt：

  • existonMountedInitialize TypeIt in the life cycle hook and pass in the configuration options:

    • strings: The array of text to be displayed.
    • speed: Typing speed (unit: milliseconds).
    • loop: Whether to play it loop.
    • breakLines: Whether to allow line breaks.

• Start the animation：

  • Call.go()Method to start the typewriter animation.

4. More configuration options

TypeIt provides a wealth of configuration options, and the following are some commonly used configurations:

5. Advanced usage

(1) Dynamic content

You can update dynamically through Vue's responsive dataTypeItcontent. For example:

<template>
  <div>
    <h1 ref="typeitElement"></h1>
    <button @click="updateText">Update text</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import TypeIt from 'typeit';

const typeitElement = ref(null);
let typeitInstance = null;

onMounted(() => {
  typeitInstance = new TypeIt(, {
    strings: ['Jiangcheng's cheerful peas'],
    speed: 100,
    loop: true,
  }).go();
});

function updateText() {
  (); // Reset the animation  ('New text content').go(); // Update text}
</script>

(2) Multi-line typing

passbreakLines: trueandstringsArrays can achieve multi-line typing effect:

new TypeIt(, {
  strings: ['Jiangcheng's cheerful peas', 'Jiangcheng's cheerful peas', 'Jiangcheng's cheerful peas'],
  speed: 100,
  breakLines: true,
  loop: true,
}).go();

(3) Customize the cursor

You can customize the cursor style through CSS:

.ti-cursor {
  color: #ff6347; /* Cursor color */
  font-weight: bold; /* Cursor thickness */
}

Summarize

passTypeIt, we can easilyVue 3Implements the effect of a text typewriter to add dynamic and fun to the web page. This article introduces the basic usage, configuration options, and advanced tips of TypeIt, and provides complete sample code. Hope this article helps youVue 3Quickly integrate TypeIt in the project!

This is the article about the code examples of Vue3 using TypeIt to achieve the effect of typewriters. For more related content of Vue3 TypeIt text printer, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!