Norbiros Posts - Answer Overflow

Norbiros

•Created by Norbiros on 4/17/2025 in #❓・help

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 ...

<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>

<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

10 replies

NNuxt

•Created by Norbiros on 3/22/2025 in #❓・help

How to use lazy components in composables?

Hi! In new nuxt version they properly added delayed hydration, which is awesome, but I have composable like this (abstraction over nuxt ui component)

import { LazyPanelModalConfirmDelete } from '#components'

export function useConfirmModal(modalData: any) {
  const overlay = useOverlay()
  const isOpen = ref(false)

  const modal = overlay.create(LazyPanelModalConfirmDelete, { props: modalData })

  async function open() {
    isOpen.value = true
    await modal.open()
  }

  function close() {
    isOpen.value = true
    modal.close()
  }

  return { open, close }
}

import { LazyPanelModalConfirmDelete } from '#components'

export function useConfirmModal(modalData: any) {
  const overlay = useOverlay()
  const isOpen = ref(false)

  const modal = overlay.create(LazyPanelModalConfirmDelete, { props: modalData })

  async function open() {
    isOpen.value = true
    await modal.open()
  }

  function close() {
    isOpen.value = true
    modal.close()
  }

  return { open, close }
}

Problem is that if modal is not opened I think component is hydrated, even if not the js for it is loaded, which is not desired behaviour. Any idea how I can do it? I found some examples with import() but I am not sure if it will help

7 replies

NNuxt

•Created by Norbiros on 3/21/2025 in #❓・help

Nuxt open fetch issues

Hi! https://github.com/enkot/nuxt-open-fetch/issues/83 I spend multiple hours trying to figure out this issue. I have no idea why this library calculates different keys in server and browser resulting in fetching data multiple times. I tried removing entire autoKey feature etc, but I can't still make it work. Any ideas?

8 replies

NNuxt

•Created by Norbiros on 6/25/2023 in #❓・help

Few questions about nuxt

Hello! 1. I have external backend. It for example returns status of servers (is online, amount of users). When I use useFetch backend receives 2 requests from client and server. Why? I found out that I can disable sendings requests from server, but it can make layout shift... 2. I have cookie based auth in my external backend. In vue I just was sending requests using axioms, and It worked, but now I want to do it proper way. Should I use nuxt-auth? I can change external api to use anything else. What are best practises? 3. I want to get random text from list with fretting messages with SSR. How to do it without hydration error? I can't just check if side is client, because it will also give error 4. When should I use hybrid rendering and when SPA? For example I have shop when user can but items on different paths, then he can go to bascket path where he can confirm buying items. Also there is complex dashboard where user can change parameters like address, password, name etc. Should I use SSR for bascket and items but SPA for user dashboard? Sorry for taking your time, but I would like to create my nuxt app in proper way 🙂

14 replies

Gaming

Programming