vue-blueprint-js

Vue 3 component library
3,203
Install
npm install vue-blueprint-js
Latest Version:0.1.99
Vue:3
License:MIT
Last Updated:Aug 14, 2023
Links: npm
Maintainer: shaunberkley

Vue Typewriter Effect

npm npm GitHub

Introduction

Vue Typewriter Effect is a Vue.js wrapper for Typewriter Effect package that has an average of over 10k weekly downloads. The package is a simple and lightweight library that allows you to use typewriter effect in your Vue.js projects with ease.

Getting Started

Install blueprint with npm:

npm install blueprint

with yarn:

yarn add blueprint

Usage

Import the component and register it globally in your Vue instance:

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app
    .component("blueprint", VueTypewriterEffect)
    .mount("#app");

or locally in your component:

import VueTypewriterEffect from "blueprint";

Use the component in your template:

<blueprint :strings="['hello', 'world']" />

Props

Name Type Default Description
element String span The HTML element to use for the wrapper.
strings Array ["Hello", "World"] Strings to type out when using autoStart option
cursor String pipe character String value to use as the cursor.
delay Number natural natural
deleteSpeed Number natural natural
loop Boolean false Whether to loop the strings.
autoStart Boolean true Whether to start typing automatically.
pauseFor Number 1500 The pause duration after a string is typed when using autostart mode.
devMode Boolean false Whether or not to display console logs.
skipAddStyles Boolean false Whether or not to skip adding styles to the document.
wrapperClassName String Typewriter__wrapper The class name to use for the wrapper element.
cursorClassName String Typewriter__cursor The class name to use for the cursor element.
stringSplitter Function null A function that splits the string into an array of characters. Example
onCreateTextNode Function null Callback function to replace the internal method which creates a text node for the character before adding it to the DOM. If you return null, then it will not add anything to the DOM and so it is up to you to handle it.
onRemoveNode Function null Callback function when a node is about to be removed. First param will be an object { node: HTMLNode, charater: string }

See the Typewriter Effect package for more information.

Related Packages

seeroad-libs

A collection of utility classes

1,068
@orderprotection/vue

Order Protection components implemented in Vue

25,773
@publishvue/vue3complib

Vue 3 component library.

12,924 0
supre-ui

A UI library for Vue2 applications

10,417

Version History

Version Released Vue License
0.1.99 ^3.2.47 MIT
0.1.98 ^3.2.47 MIT
0.1.97 ^3.2.47 MIT
0.1.96 ^3.2.47 MIT
0.1.95 ^3.2.47 MIT