vue-typed

Typed components for VueJs.

This project contains the main feature that can demonstrate the typing effect, using different HTML tags. It was inspired when I was creating my own project and need writing animation, but the components that I found, it is creating spans and I need to manage the text as a label, so my word doesn't seem cut in half.

Live Demo

Quick start

You need Vue.js version 2.5+.

1. Install via npm

npm i @tsaibot/vue-typed
// or
yarn add @tsaibot/vue-typed

2. Import and use VueTyped

import Vue from 'vue';
import VueTyped from '@tsaibot/vue-typed';

Vue.use(VueTyped);

// this is an example vue settings
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

Or import on your view

<script lang="ts">
import Vue from 'vue';
import VueTyped from '@/vue-typed.vue';

export default Vue.extend({
  name: 'YourViewName',
  components: {
    VueTyped
  }
});
</script>

3. Using the component

<!-- your code here -->
<!-- an example using as h1-->
<vue-typed tag="h1" :text="['VueTyped', 'vue-typed', 'vueTyped']"/>
<!-- an example using as span-->
<vue-typed text="Welcome to Your VueTyped" />
<!-- your code here -->

Alternatively

<!-- VueTyped JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@tsaibot/vue-typed/dist/vue-typed.min.js"></script>

License

Code released under MIT license.