Persistent / Global Components

[TheAlexLichter]

Is your feature request related to a problem? Please describe.

As an educator, I want to show a demo of a running script, e.g. a 3D Scene rendered via TresJS throughout my slides.
The scene should not reload when slides are switched and instead stay the same (or, if I control it via props, even do something else).

Same could be applied to iframes that are shown in a 2-column layout during a presentation.

Originally, @toddeTV hit this issue when creating slides around 3D and Vue.

Describe the solution you'd like

It would be great to have a way to keep these components alive somehow, so they do not re-render when the slides are changed.

Describe alternatives you've considered

• Teleports + global-top.vue - doesn't work, no matter if deferred or not. Maybe a pattern from https://github.com/marchantweb/nuxt-adaptive-teleport could be applied but would still cause issues with TresJS/3D content.
• global-top.vue w/o teleports - works for all types of content but is even hackier 😂
• layouts -> same problem!

Related

(Somewhat) #2041

[twitwi]

Just an idea (not sure how much it differs from classical teleport, but I guess it is different as it is more a fake teleport):

• putting the thing in global-top (or something dedicated if we go for a specific support inside slidev)
• adding a kind of teleport-target (that users can put in the slides)
• having an automatic positioning of the thing based on the teleport-target actual position

[TheAlexLichter]

@twitwi The problem with <Teleport> under the hood is that it doesn't play nicely with TresJs from what I've seen (but maybe this can be "resolved" via Tresjs/tres#464)

[toddeTV]

Thank you @TheAlexLichter for reporting this issue in my interest.

I originally encountered this problem in the following slides/ talk:
https://github.com/toddeTV/talk-2025-02-13-hamburg-vue-js-meetup

I attempted to bind the TresJS context using Teleport to prevent losing it over multiple slides for smooth animations and persistent user interactions with changing slide content. But unfortunately, this approach did not work. The TresJS context follows its own lifecycle, making it also incompatible with defer.

I also tried using defer to create an independent environment that checks for existence and then reinitializes the TresJS context, but this was unsuccessful as well.

In the end, I implemented the alternative and much hackier solution that I discussed with @TheAlexLichter using global-top.vue without Teleport, see https://github.com/toddeTV/talk-2025-02-13-hamburg-vue-js-meetup/blob/main/global-top.vue

[twitwi]

Hi @TheAlexLichter , I looked at Tresjs/tres#464 , maybe I read too fast, but just in case, could the issue be that v-if will remove the element from the DOM and thus tres will need to re-init?
Have you tried hiding using v-show instead of v-if? or even css visibility:hidden? :style="{visibility: isVisible ? 'visible' : 'hidden'}"