Orlandster / vue-typed-js

Typed.js integration for vue.js. Create a typing animation.
http://www.mattboldt.com/demos/typed-js/
MIT License
469 stars 37 forks source link

Events not working as expected #31

Open isaacjoy opened 4 years ago

isaacjoy commented 4 years ago

Hey,

Thanks for making this plugin - it's really useful for me. The only slight problem I'm having is getting some events to fire properly.

I'm using vue-typed-js in nuxt.js and when I use the @onStart method on my component, it does not get called before starting. The same is true with @preStringTyped and @onTypingResumed, although @onComplete works strangely enough.

Here is my VueTypedJs component:

        <vue-typed-js 
        :strings="['&nbsp;page&nbsp;', '&nbsp;link&nbsp;', '&nbsp;way&nbsp;']"
        :typeSpeed="100"
        :startDelay="1000"
        :showCursor=false
        @onStart="handleStart()"
        @preStringTyped="handleStart()"
        @onTypingResumed="handleStart()"
        @onComplete="handleComplete()"
        >
            <h1 class="text-5xl font-bold">One<span class="typing"></span>.to</h1>
        </vue-typed-js>

And the methods in the component are:

        handleStart() {
            alert('started')
        },
        handleComplete() {
            alert('completed')
        }

The only alert message I see is the completed one, which is annoying because I want to append an extra space to the word I'm inserting in between 2 other words before it starts typing.

I'm using it as plugin in nuxt like so:

Typed.js

import Vue from 'vue'
import VueTypedJs from 'vue-typed-js'

Vue.use(VueTypedJs)

Nuxt.config.js

  plugins: [
    { src: '~plugins/typed.js', ssr: false },
  ],

I have a feeling it may something be to do with https://github.com/Orlandster/vue-typed-js/issues/29 but I'm not sure.

Thanks for any help and again thanks for building a really useful plugin, Isaac