Play with the vue-typer, a component that simulates a user typing, selecting, and erasing text.

vue-typer

Use this Vue component in your project to simulate a user typing, selecting, and erasing text.

VueTyper is also stylable with CSS!

Example

Install:

npm install --save vue-typer

Usage:

App.vue

//improt locally
import { VueTyper } from 'vue-typer'

export default {
  components: {
    VueTyper
  }
}

<vue-typer text='Vue component that simulates a user typing, selecting, and erasing text!'
        :repeat='Infinity'
        :shuffle='false'
        initial-action='typing'
        :erase-delay='550'
        erase-style='select-all'
        :erase-on-complete='false'
        caret-animation='expand'
></vue-typer>

You can bind your props or put them directly on your template. For detailed explanations about props, check here.

This is the result of the above code.

Check it out on GitHub and play around with this interactive Demo.