NuxtN
Nuxt•10mo ago•
9 replies
Norbiros

Typing animation with markdown

Hi! I am trying to test my Nuxt skills in more complex scenario. I want to create typing animation - it sounds simple, but I want to support markdown and I want to do that without sending no markdown related libraries to the client! I managed to implement component like this:
<template>
  <div ref="typeInput">
    <slot class="hidden">
      <h2>Hello <span style="color:red;">World</span></h2>
      <p>This is <strong>animated</strong> typing!</p>
    </slot>
  </div>

  <div ref="typeTarget" style="white-space: pre-wrap;" />
</template>

... typing logic ...

And In parent i am trying to pass rendered markdown and refresh it:
<AnimatedText ref="animatedText">
  <!-- This is a server component -->
  <MarkdownContent :text="currentMessage.message" class="text-xl md:text-2xl font-semibold" />
</AnimatedText>


Problem is that I am using server components and I have to wait until it finishes rendering, sending to client and then run animation. But I have no idea how to do that, nextTick won't work...
I really don't want to use markdown-it, because I managed to use mdc (from nuxt content) everywhere, so I don't want to add it only for this simple thing
Was this page helpful?