vue3-typed-js

A Vue3 wrapper for Typed.js library.

Installation

npm install vue3-typed-js

Usage

import { createApp } from 'vue';
import App from './App.vue';
import VueTyped from 'vue3-typed-js';

const app = createApp(App);
app.use(VueTyped);
app.mount('#app');

Example usage inside your Vue component:

<template>
<VueTyped
:strings="typedStrings"
:typeSpeed="50"
:backSpeed="30"
:loop="true"
@onComplete="handleComplete"
></VueTyped>
</template>

<script>
export default {
  data() {
    return {
      typedStrings: ['Hello, ^1000 I am Typed.js', 'And I work with Vue 3!'],
    };
  },
  methods: {
    handleComplete() {
      console.log('Typing is complete');
    },
  },
};
</script>

Props

Prop	Type	Description
strings	Array	An array of strings to type
typeSpeed	Number	Typing speed in milliseconds
startDelay	Number	Time before typing starts (in milliseconds)
backSpeed	Number	Backspacing speed in milliseconds
smartBackspace	Boolean	Enable/disable smart backspace
shuffle	Boolean	Enable/disable shuffling of strings
backDelay	Number	Time before backspacing (in milliseconds)
fadeOut	Boolean	Enable/disable fade out animation
fadeOutClass	String	CSS class for fade animation
fadeOutDelay	Number	Fade out delay in milliseconds
loop	Boolean	Enable/disable loop
loopCount	Number	Number of loops or Infinity
showCursor	Boolean	Show/hide the cursor
autoInsertCss	Boolean	Insert CSS for cursor and fadeOut into HTML
attr	String	Attribute for typing
bindInputFocusEvents	Boolean	Bind to focus and blur if el is text input or textarea
contentType	String	'html' or 'null' for plaintext
onComplete	Function	Callback when typing is complete
preStringTyped	Function	Callback before a string is typed
onStringTyped	Function	Callback when a string is typed
onLastStringBackspaced	Function	Callback when the last string is typed and backspaced
onTypingPaused	Function	Callback when typing is paused
onTypingResumed	Function	Callback when typing is resumed
onReset	Function	Callback when the typed instance is reset
onStop	Function	Callback when the typed instance is stopped
onStart	Function	Callback when the typed instance starts
onDestroy	Function	Callback when the typed instance is destroyed

License

MIT