vue-ityped

awesome ityped for vue

Usage no npm install needed!

<script type="module">
  import vueItyped from 'https://cdn.skypack.dev/vue-ityped';
</script>

README

Vue-ityped

awesome ityped for vue

Example

Live Demo

Dependencies

  • Vue
  • ityped@0.0.8

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