Repository files navigation

A Vue.js integration for Typed.js.

Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.

Checkout the offical projecthere.

• Installation
• Usage
• Example

npm install --save vue-typed-js

Install the component:

importVuefrom'vue'importVueTypedJsfrom'vue-typed-js'Vue.use(VueTypedJs)

⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

<linkrel="stylesheet"href="vue-typed-js/dist/vue-typed-js.css"/><scriptsrc="vue.js"></script><scriptsrc="vue-typed-js/dist/vue-typed-js.browser.js"></script>

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Install all the components:

Vue.use(VueTypedJs)

To get started simply add thevue-typed-js custom element to yourtemplate and pass the text, which should be typed to thestrings property. In addition you need to pass an element with the classtyping to the slot, which will be used as awrapper.

Minimal setup:

<vue-typed-js:strings="['First text', 'Second Text']"><h1class="typing"></h1></vue-typed-js>

Thetyping class also allows you to just animate certain parts of a string:

<vue-typed-js:strings="['John', 'James']"><h1>Hey<spanclass="typing"></span></h1></vue-typed-js>

You can make use of the following properties in order to customize your typing expirience:

You can listen to the following events:

Checkout features liketype pausing,smart backspacing etc. on the librariespage.

Here are several examples:

<!-- infinite loop --><vue-typed-js:strings="['awesome', 'brilliant']":loop="true"@onComplete="doSmth()"><h2>We are a<spanclass="typing"></span> company!</h2></vue-typed-js><!-- type pausing --><vue-typed-js:strings="['This is text ^1000 which gets paused for 1 second', 'wow, interesting']"><h2class="typing"></h2></vue-typed-js><!-- output html --><vue-typed-js:strings="['<p>Paragraph</p>', '<span>Span</span>']":contentType="'html'"><h2class="typing"></h2></vue-typed-js>

MIT