Vue-ityped

awesome ityped for vue

Example

Live Demo

Dependencies

• Vue
• [email protected]

Usage

HTML

<span v-typed.showCursor="{typeSpeed: 100}">
	<span>Dead simple animated typing</span><br>
	<span>No jQuery dependency.</span><br>
	<span>Tiny size: <3kb.</span><br>
	<span>Just install and Enjoy!</span>
</span>

Vue

import vueTyped from 'vue-ityped';

var vm = new Vue({
	el: '#app',
	directives: {
		typed: vueTyped
	}
});

Configuration

Almost same to ityped Configuration, but a little different is

• Put the configuartion in different place, you can pass the configuration to the directive value, like that:

<span v-typed="{typeSpeed: 100, backSpeed: 50, startDelay: 500}">
</span>

• showCursor and loop use in vue directive modifiers, like that:

<span v-typed.showCursor="">
</span>

just like make the ityped configuration showCursor is true, so do loop.

• the directive element's children text will be equal to ityped strings, when you have multi children, you should make them line break, for example the <br> tag

Thanks

Powered by vue.js and ityped