vue-typical

Vue Typical

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

npm license

Live Demo ✨ https://vue-typical.vercel.app

📦 Installation

Install with yarn

 yarn add vue-typical

Or you can

 npm install vue-typical

Or inject the script at your page by jsdelivr CDN

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

🚀 Usage

1. Component

You can import it as a custom component.

<template>
  <v-typical
    class="blink"
    :steps="['Hello', 1000, 'Hello World !', 500, 'Hello World ! 👋', 1000]"
    :loop="Infinity"
    :wrapper="'h2'"
  ></v-typical>
</template>

<script lang="ts">
import VTypical from 'vue-typical';

export default {
  components: {
    VTypical,
  },
};
</script>

2. Plugin API

If you want to configure default options, you can register this plugin through the use API of Vue.js.

 // main.js or index.js
import VTypical from 'vue-typical';

Vue.use(VTypical, {
  /* options */
});

If you use the plugin API, the VTypical component will be registered as a global component just like when including it with the script tag, but you won't need to re-register it through the components property in your own components.

3. Composition API

You can also create typical animation by the composition API useTypical.

 const ref = useTypical(options);

Coming Soon ...

📑 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 blink classname.

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

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

🔢 Coming Soon

[ ] The demo of composition API in Vue 3.0

🔨 Contribute

Install dependencies,

 $ npm i

Start the dev server,

 $ npm start

Build documentation,

 $ npm run docs:build

Build library via father-build,

 $ npm run build

❤️ Contributors

Thanks goes to these people:

Contributors

Please Feel free to enjoy and participate in open source!

⭐ Stargazers

Thanks for your star!

🔖 License

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

Inspired by @catalinmiron/react-typical.

MIT © Turkyden