VueJs-Typing

Vue Typing is a lightweight directive compatible with both Vue 2 and Vue 3. It simulates the typing of text for any HTML tag, providing a dynamic typing effect. It's perfect for creating typing animations in your Vue.js applications.

This guide will help you install and use the directive in your Vue.js project.

Ensure you have the following installed on your system:

• Node.js and npm
• Vue.js/Nuxt

1. Install the package

   Open your terminal and run the following command:

   npm install vuejs-typing

You can use the directive either globally in your Vue application or locally in a single Vue component.

1. Global import

   Import the directive and use it in your Vue application:

   import { createApp } from 'vue'
   import App from './App.vue'
   import typing from 'vuejs-typing'
   
   const app = createApp(App)
   
   app.use(typing)

2. Local import

   Import the directive and use it in your Vue component:

   import { typing } from 'vuejs-typing'
   
   export default {
     directives: {
       typing
     }
   }

Use the directive

You can now use the directive in your Vue template:

<div v-typing="'Hello World'"></div>

Or with an object configuration:

<div v-typing="{ text: 'Hello World', typeSpeed: 100, hasCaret: true, caretSymbol: '|', wordSplit: false }"></div>