Skip to content
This repository was archived by the owner on Jun 8, 2021. It is now read-only.

ming-tsai/vue-type-text

Folders and files

NameName
Last commit message
Last commit date
Apr 29, 2021
Jun 20, 2020
Jun 20, 2020
Jun 20, 2020
Jun 19, 2020
Jun 13, 2020
Jun 13, 2020
Jun 20, 2020
Jun 19, 2020
Jun 8, 2021
May 10, 2021
Jun 19, 2020
Jun 19, 2020
Jun 19, 2020
Jun 20, 2020

Repository files navigation

vue-type-text

Node.js CI Quality Gate Status

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 vue-type-text
// or
yarn add vue-type-text

2. Import and use VueTypeText

import Vue from 'vue';
import VueTypeText from 'vue-type-text';

Vue.use(VueTypeText);

// 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 VueTypeText from '@/vue-type-text.vue';

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

3. Using the component

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

Alternatively

<!-- VueTypeText JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/vue-type-text/dist/vue-type-text.min.js"></script>

License

Code released under MIT license.