turkyden/vue-typical

🐡 Vue Animated typing in ~400 bytes of JavaScript

English | 简体中文

Vue Typical

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

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>

💡 This library Just support Vue 3 now

If you are Vue 2, please see the branch v1 and install [email protected]

🚀 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
• Supported Vue 2 & 3

🔨 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:

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

vue-typical's Issues

Support on Vue 3?

Will it be in vue 3 ?

4 warnings in demo project

Hello, I am trying to test your package (vue2) but getting error with a sample from your readme file ...

WARNING Compiled with 4 warnings 9:07:59 AM

warning in ./node_modules/vue-typical/dist/vue-typical.es.js

"export 'defineComponent' (imported as 't') was not found in 'vue'

warning in ./node_modules/vue-typical/dist/vue-typical.es.js

"export 'h' (imported as 'e') was not found in 'vue'

warning in ./node_modules/vue-typical/dist/vue-typical.es.js

"export 'onMounted' (imported as 'o') was not found in 'vue'

warning in ./node_modules/vue-typical/dist/vue-typical.es.js

"export 'ref' (imported as 'n') was not found in 'vue'

pen link down

To put it as simply as possible: I cannot visit your pen.

event

Hi!

Is it possible to emit an event once the animation is done?

Thank you!