🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A vue.js 2 component that imitates typing text just like the typewriter.

Text

Documentation

vue-type-writer

A vue component that imitate typing text..

Installation

npm install vue-type-writer --save

and in your component:

import typewriter from 'vue-type-writer'

Usage

<typewriter ref="typewriter" :interval="50">   <!-- elements that u want to type --> </typewriter>

Props

Name Type Required Default Description
interval Number false 75 time interval to type

Demo

Logo

<template>   <div>     <button @click="type">start.</button>     <typewriter class="tl" ref="typewriter" :interval="50" :style="{visibility: status}">       <div class="comments">         <p>/**</p>         <p><span class="space"></span>*imitate typing</p>         <p>*/</p>       </div>     </typewriter>   </div> </template>
import typewriter from 'vue-typewriter' ...  {    ...    components: { typewriter, ... },    data () {      return {        ...        status: 'hidden'        ...      }    },    methods: {      // $emit      type () {        this.status = 'visible'        this.$refs.typewriter.$emit('typewrite')      }    }  } ...

TODO

support typing space and html labels


You May Also Like