@reusable-ui-tr/vue3-type-writer-effect NPM

Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

ReusableUITR Vue3 component for typewriter effect

A Vue 3 component for creating a typewriter effect with customizable options.

Demo

Click here for a live demo.

Installation

Install '@reusable-ui-tr/vue3-type-writer-effect' with npm

npm i @reusable-ui-tr/vue3-type-writer-effect

Import TypeWriterEffect component in your vue3 component

import TypeWriterEffect from "@reusable-ui-tr/vue3-type-writer-effect";

Use 'TypeWriterEffect' component inside a template

<TypeWriterEffect
  blink-duration="2s"
  cursor-color="blue"
  font-family="Lucida Console"
  font-size="20px"
  highlight-color="green"
  text="Hello World!"
  text-color="white"
  text-wrapper-element-type="p"
  typing-speed="slow"
/>

Properties

Property Name	Property Type	Usage	Default Value	Required
blink-duration	String	Blink duration of typewriter effect in seconds or milliseconds (Example values: '1s', '10ms' etc.)	'1s'	no
cursor-color	String	All CSS legal color values are supported. (Example values: '#00ff00', #00ff0080, rgb(0, 255, 0), rgba(0, 255, 0, 0.3), hsl(120, 60%, 70%), hsla(120, 60%, 70%, 0.3), 'green' etc.)	'black'	no
font-family	String	Font family of the text	'Roboto, Arial, sans-serif'	no
font-size	String	Font size of the text	'16px'	no
highlight-color	String	Highlight color of the text	'transparent'	no
text	String	Content of the text	none	yes
text-color	String	All CSS legal color values are supported. (Example values: '#00ff00', #00ff0080, rgb(0, 255, 0), rgba(0, 255, 0, 0.3), hsl(120, 60%, 70%), hsla(120, 60%, 70%, 0.3), 'green' etc.)	'black'	no
text-wrapper-element-type	String	Type of HTML element to wrap text (All HTML elements are valid)	'code'	no
typing-speed	String	Typing speed of typewriter effect (Only following keywords are valid: 'slowest', 'slow', normal', 'fast', 'fastest')	'normal'	no