Home

Awesome

<p align="center"> <img src="https://github.com/cngu/vue-typer/blob/develop/src/demo/assets/demo.gif?raw=true" alt="VueTyper demo gif"/> <br><br> Vue component that simulates a user typing, selecting, and erasing text. <br><br> <a href="https://cngu.github.io/vue-typer"><strong>Play with vue-typer in this interactive demo.</strong></a> <br><br> </p> <p align="center"> <a href="https://www.npmjs.com/package/vue-typer"><img src="https://img.shields.io/npm/dt/vue-typer.svg" alt="Downloads"></a> <a href="https://www.npmjs.com/package/vue-typer"><img src="https://img.shields.io/npm/v/vue-typer.svg" alt="Version"></a> <a href="https://www.npmjs.com/package/vue-typer"><img src="https://img.shields.io/npm/l/vue-typer.svg" alt="License"></a> </p>

Getting Started

VueTyper has a single dependency to lodash.split to support emojis and other multi-codepoint Unicode characters. Apart from this, VueTyper does not have any direct dependencies to any other library or framework -- not even to Vue itself! All required Vue API calls are made through Vue's this.$* context methods. This means VueTyper can only execute within a Vue application context, but in exchange, it does not need to pull in Vue, which keeps VueTyper lightweight.

Prerequisites

Installation

npm

Use this method if you wish to import/require VueTyper as a module.

npm install --save vue-typer

CDN

Use this method if you wish to access VueTyper globally via window.VueTyper.

<script src="https://unpkg.com/vue-typer/dist/vue-typer.min.js"></script>

Usage

After installing VueTyper, you may choose to register it either globally or locally. What's the difference? See the Vue documentation here.

Local Registration

  1. Import the VueTyper component directly from your Vue component file:
// ES6
import { VueTyper } from 'vue-typer'
// CommonJS
var VueTyper = require('vue-typer').VueTyper
// Global
var VueTyper = window.VueTyper.VueTyper
  1. Register it as a local component in your Vue component options:
var MyComponent = {
  // ...
  components: {
    // ES6; property shorthand + Vue should automatically dasherize the key for us
    VueTyper
    // pre-ES6
    'vue-typer': VueTyper
  }
}
  1. Use vue-typer in your Vue component's template:
<vue-typer text='Hello World! I was registered locally!'></vue-typer>

Global Registration

  1. Import the VueTyper plugin in your application entry point:
// ES6
import VueTyperPlugin from 'vue-typer'
// CommonJS
var VueTyperPlugin = require('vue-typer').default
// Global
var VueTyperPlugin = window.VueTyper.default
  1. Register the VueTyper plugin with Vue
Vue.use(VueTyperPlugin)
  1. Now you can freely use vue-typer in any Vue component template:
<vue-typer text='Hello World! I was registered globally!'></vue-typer>

Props

It may be helpful to play around with these props in the interactive demo.

text

repeat

shuffle

initialAction

preTypeDelay

typeDelay

preEraseDelay

eraseDelay

eraseStyle

eraseOnComplete

caretAnimation

Events

typed

typed-char

erased

completed

Styles

To keep the separation of concern between component code and styles, VueTyper can be fully styled through CSS (as opposed to props).

The following is a skeleton selector structure to override the style of each component of VueTyper.

Contribution Guide

  1. Make all changes on the develop branch.
  2. Update the demo page to showcase new APIs or features.
  3. Add unit tests.
  4. Update this README if necessary.
  5. Submit a PR!

Changelog

Changes for each release will be documented here.

TODO

License

MIT

Copyright © 2016-Present, Chris Nguyen. All rights reserved.