#24 fixes this.

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 #29 but I'm not sure.

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

Hey! Thanks for the library. In the original typedJs library adding a line break \n within a string creates another line. In vue-typed-js it isn't working for me.

<vue-typed-js :strings="['word1', '<span class='text-white'>/</span>', '<span class='text-darkgrey text-mono my-2'>word2</span>' ]" :loop="true" :contentType='html'> <span class="typing"></span> </vue-typed-js>

The text is stored in vuex, but when I refresh the page, the text disappears from the page unless I run the program again
In addition the text is obtained by sending a network request

Hey! :)
Setting the showCursor property to true and then to false does not remove the cursor. Is that the expected behaviour? Is there a way to make it reactive?

Can this be added as a local component?

Hey, guys.

I need help to subscribe to the event, as I currently use a lib to perform string translation.

I make the request via router, in which I change the router and it does the simulated translation, however the strings inside the vue-typed are not translated, only when I give a reload on the page. I need help to carry out this simuntaneo translation, without needing to reload the page.

Here is a snippet of code so you can see my problem:

<vue-typed-js :strings="[$t('title_site.span_design'),$t('title_site.span_manage'),$t('title_site.span_dev')]" :backSpeed="100" :typeSpeed="100" :backDelay="1000"> <h1>{{ $t('title_site.message_think')}}<br/> {{ $t('title_site.aux_let') }} <span class="typing"></span> {{ $t('title_site.aux_us') }} </h1> </vue-typed-js>

Thank you and I'll be waiting.

Hey, love the library!

After implenting it on a project, I noticed that the module is emitting events in a loop even after the component which renders it is destroyed. How can I stop event triggers after I'm no longer on the page that features VueTypedJs?

Thanks!

Is there any plans for supporting this library for Nuxtjs?

Hello,

in the package.json the typed.js dependency is written with the direct link to github instead of the version number.

"typed.js": "git+https://github.com/mattboldt/typed.js.git"

This creates a problem when using the library in CI or when using it as a dependency.

What do you think?

[Vue warn]: Error in mounted hook: "TypeError: this.$refs.typedElement.querySelector is not a function"

found in

--->

<vue-typed-js
            :strings="['idho Danang Sanyoto;']"
            :type-speed="150"
            :back-speed="20"
            :back-delay="100"
            :show-cursor="false"
            :fade-out="false"
            :loop="true"
          >
<h1 class="text-custom-title text-8xl py-4 -m-2">R<span class="typing"></span></h1>
<vue-typed-js>

the backspace effect not showing, it always fade out when the effect end

Typer got crash while writing AND character (&), it stops working and complete a sentence without typing effect

I see vue-typed-js is released as 0.2.0 → https://github.com/Orlandster/vue-typed-js/releases/tag/0.2.0
but NPM is still version 0.1.2 → https://www.npmjs.com/package/vue-typed-js
any plans publishing to NPM as well?

npm install vue-typed-js throws an error
undefined ls-remote -h -t https://github.com/mattboldt/typed.js.git

Hi, in the NPM v2 is not getting downloaded. It is showing v0.1.2 instead of v0.2

Hey,
After installing and running the plugin the following error is displayed

[Vue warn]: Error in nextTick: "TypeError: s.trim is not a function"

vue.runtime.esm.js?2b0e:1888 TypeError: s.trim is not a function
    at eval (typed.js?10b3:662)
    at Array.map (<anonymous>)
    at Initializer.load (typed.js?10b3:661)
    at new Typed (typed.js?10b3:92)
    at VueComponent.initTypedJS (TypedJS.vue?cdc7:26)
    at VueComponent.eval (TypedJS.vue?cdc7:16)
    at Array.eval (vue.runtime.esm.js?2b0e:1980)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

my code

<vue-typed-js :strings="['First text', 'Second Text']">
  <h1 class="typing"></h1>
</vue-typed-js>

vue => (cli) 3
node => v12.16.1

I am nost sure if this is an issue of default behavior of vue/nuxt

I am using vue-typed-js on one of the pages in my nuxt website, and even when I navigate away from the page where I used this component, I see a lot of events continuously emitted by this package. Is that suppose to happen?

These events were being emitted even when I only opened the home page.

My setup is as follows:

I added a file calledplugins/vue-typed-js.js

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

Vue.use(VueTypedJs);

and in nuxt.config.js file I have

plugins: [
  {src: '@/plugins/vue-typed-js.js'},
]

I have this component being used in a page deep inside the route http://localhost:3000/projects/testProject and I can see the events even when I open the index.html at the root http://localhost:3000/ after I have opened the project page.

Is there any special way to destroy the component after navigating away?

npm ERR! Command failed: git clone --mirror -q https://github.com/mattboldt/typed.js.git /root/.npm/_cacache/tmp/git-clone-4af6d03a/.git
npm ERR! warning: templates not found /tmp/pacote-git-template-tmp/git-clone-f3ed15fc
npm ERR! fatal: unable to access 'https://github.com/mattboldt/typed.js.git/': Encountered end of file

:strings binds dynamic data and cannot be printed

<vue-typed-js :loop="true" :strings="[quote.content]" :type-speed="50" :back-speed="50">
  <span class="typing" />
</vue-typed-js>

Is there no option to center align the text?

I'm trying to use vue-typed-js but I get the following error: "Unknown custom element: ".

I've installed it via npm install --save vue-typed-js.

Inside the component in which I want to use Typed-js I've put

import Vue from 'vue';
import { VueTypedJs } from 'vue-typed-js';
Vue.use(VueTypedJs);

inside the script tag and:

<vue-typed-js :strings="['First text', 'Second Text']">
<h1 class="typing"></h1>
</vue-typed-js>

inside the template tag.

But it doesn't work.

Thank you.

Your "Default Import" section doesn't quite work for me. In order for the component to be recognized post entry-point, I had to import and use the entire module. I guess what I'm trying to say is that I think the default import snippet doesn't need brackets--e.g.

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

Vue.use(VueTypedJs) 

Hey,

try to set the :stringsElement in vue. Adding it inside the vue-typed-js, the error message comes "... Just one child element ...". Where do I have to add it?

<vue-typed-js 
:stringsElement="'myId'"
:typeSpeed="50"
>
<div id="myId">Some Text for typing-class</div>
  <h1 class="typing"></h1>
</vue-typed-js>

ps> How to replay?

do you plan to support vue version 3?

Hi, thanks so much for your work on this.

As noted in the title, the animation breaks after one cycle with both :loop="true" and smartBackspace="true" configured.

e.g.

    <vue-typed-js
      :strings="['Any Old Bollocks', 'Any Other Business', 'Await Orthogonal Blessings', 'Abraham Object Bison', 'About Occasionally Beloved', 'Adolescent Orangutan Bicycles']"
      :typeSpeed="100"
      :startDelay="1000"
      :backSpeed="20"
      :smartBackspace="false"
      :shuffle="true"
      :loop="true"
      :showCursor="false"
    >
      <h1 class="typing"></h1>
    </vue-typed-js>

I believe this was fixed in the original package, as mentioned here: mattboldt/typed.js#262 (comment)

Works perfectly in template as a component but need to use it as variable within another component.
Tried it as a constructor in mounted and computed but still no luck.
Can you please help me?
https://codesandbox.io/s/ckybh?fontsize=14
Many Thanks