Vue.js Typewriter Component


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.


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'


   data () {
     return {
       status: 'hidden'
   methods: {
     // $emit
     type () {
       this.status = 'visible'

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>


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.