psk-typewriter

psk-typewriter

Vue component to simulate typing text.

• Report bugs: https://github.com/pauloklaus/psk-typewriter/issues
• Live test: https://pauloklaus.com.br/playground

Install

Create a new vue project:

vue create

Install component:

npm install --save psk-typewriter

Environment setting

Make a src/resources folder at the root:

mkdir src/resources

Configure the psk-typewriter

Create the src/resources/psk-typewriter.js:

import Vue from "vue";
import TypeWriter from "psk-typewriter";

Vue.use(TypeWriter, { TypeWriterName: "MyTypeWriter" });

Import psk-typewriter

The "src/main.js" file should look like this:

import Vue from "vue";
import App from "./App.vue";

import "./resources/psk-typewriter";

Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount("#app");

How to use (example in App.vue)

<template>
    <div>
        <my-type-writer text="And now?" @finished="playExplore = true" />
        <my-type-writer :text="explore" v-if="playExplore" />
    </div>
</template>

<script>
export default {
    data() {
        return {
            playExplore: false,
            explore: "How about we explore the universe?"
        }
    }
}
</script>

Properties

Property	Description	Required	Default
endChar	Character used at the end of the text while it is displayed.	no	_ (underline char)
text	Text to display	yes	:)
timeout	Time to display the next character	no	15
autoscroll	Scroll the screen to the message	no	false

Events

Event	Description
finished	When the message is all displayed

Using in the browser

To use directly in the browser, import psk-typewriter:

<script src="https://unpkg.com/psk-typewriter" />