vue3-typed.js v1.0.0-pre

Typed.js for Vue 3

Vue 3 Component wrapper for Typed.js.

Check out Typed.js here.

Installation

npm install --save vue3-typed.js
# Yarn:
yarn add vue3-typed.js

Use

You can either add the component globally:

import { createApp } from 'vue';
import { plugin as vueTyped } from 'vue3-typed.js';

const app = createApp();

app.use(vueTyped);

Or use the component directly:

<script lang="ts">
import { VueTyped } from "vue3-typed.js"

export default defineComponent({
  components: {
    VueTyped
  }
})
</script>

Usage

To get started simply use the VueTyped component in your template.

Minimal setup:

<vue-typed :strings="['Hello', 'World']" />

All configuration options of Typed.js can be passed via props.

You can pass an element with the typing class inside of the component, which will be used by Typed.js.

<vue-typed :strings="['World', 'John']">
  <h1>Hello <span class="typing"></span></h1>
</vue-typed>

Props

You can use all available config options (except for events, see Events) of Typed.js as props, for more information see the Typed.js docs.

Events

The VueTyped component emits all events that Typed.js has and passed a Ref for the Typed.js instance.

All available events are available in the Typed.js docs.

Example usage:

<template>
  <vue-typed :strings="['hello', 'world']" @onComplete="onTypingComplete" />
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { VueTyped, TypedRef } from 'vue3-typed.js';

  export default defineComponent({
    setup() {
      // type TypedRef = vue.Ref<Typed>
      const onTypingComplete = (ref: TypedRef) => {
        ref.value; // Typed.js
        console.log('typing complete');
      };

      return {
        onTypingComplete,
      };
    },
  });
</script>

2021 © Filip Vottus – Licensed under MIT.