English | ็ฎ€ไฝ“ไธญๆ–‡

Vue Typical

Vue Animated typing in ~400 bytes ๐Ÿก of JavaScript. Preview โ†’

npm npm license vitepress jsdelivr

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

PropRequiredTypeEg.
stepsTrueArray<String | Number | Function>['Hello', 1000, () => alert('Word')]
loopFalseNumber1 or 'Infinity'
wrapperFalseString'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!

Stargazers repo roster for @Turkyden/vue-typical

๐Ÿ”– 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

Last Updated: