vue-typical

Vue Animated typing in ~400 bytes 🐡 of JavaScript. Preview →

📦 Install

You can install vue-typical via npm:

npm install vue-typical

Or use it directly in browser via cdn service:

<script src="https://cdn.jsdelivr.net/npm/vue-typical@latest/dist/typical.umd.min.js"></script>

🚀 Usage

<typical
  :steps="['Hello', 1000, 'Hello world!', 500]"
  :wrapper="'h2'"
></typical>
<typical
  class="typicalWrapper"
  :steps="['Fucking', 1000, 'Fucking Awesome!', 500, 'Fucking Awesome! Aha :-) 👋', 1000]"
  :loop="Infinity"
  :wrapper="'h3'"
></typical>

📑 Properties

Prop	Required	Type	Eg.
`steps`	True	Array<String \| Number \| Function>	`['Hello', 1000, () => alert('Word')]`
`loop`	False	Number	`1` or `'Infinity'`
`wrapper`	False	String	`'div'`

✨ Style

Add the blink cursor effect with typicalWrapper classname.

.typicalWrapper::after {
  content: "|";
  animation: blink 1s infinite step-start;
}

@keyframes blink {
  50% { opacity: 0; }
}

🔨 Contributing

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

❤️ Contributors

Thanks goes to these people (emoji key):

_Turkyden
💻📖🚇⚠️

_KnowsCount
📖

License

This library is based on @camwiegert/typical work and it currently is just a wrapper for vue.

Inspired by @catalinmiron/react-typical.

D3XSKY/vue-typical