vue-type-text
v0.1.3
Published
Typed components for VueJs
Downloads
10
Maintainers
Readme
vue-type-text
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.
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.