Vue.js Typewriter Component

vue-type-writer

A Vue.js component that imitates typing text just like the typewriter. Place it in your files to make a text appear as if someone was typing it.

Example

To start working with the Typewriter Component use the following commands to install it.

Via npm:

npm install vue-type-writer --save

Via yarn:

yarn add vue-type-writer

and in your component:

import typewriter from 'vue-type-writer'

Usage:

 {
   data () {
     return {
       ...
       status: 'hidden'
       ...
     }
   },
   methods: {
     // $emit
     type () {
       this.status = 'visible'
       this.$refs.typewriter.$emit('typewrite')
     }
   }
 }

You can put the typewriter anywhere in the template

<!-- start the typerwritter manually -->
<button @click="type">Start Typing</button>
<typewriter ref="typewriter" :interval="75" :style="{visibility: status}">

<p>The typewriter component can be used to</p>
<h3><em class="space">imitate typing</em></h3>
<p>!!!!!!!</p>

</typewriter>

The props of this component are available here.

That's it! If you would like to get started with vue-type-writer, head to the project's repository on GitHub, where you will also find the source code.