Subscribe on changes!

teleport an element from outside of VUE instead of v-html

avatar
Jan 12th 2023

What problem does this feature solve?

Can we teleport an element from outside of VUE and use it instead of v-html? I am trying to create a solution for javascript disabled situations for PWA. I need a solution to prevent duplicate content for first loading of the page. Kinda partial hydration, I think..

What does the proposed API look like?

No idea

avatar
Jan 12th 2023

Can you provide a little more context? I don't see any connection between Teleport and v-html, so I don't really get what you are asking for.

avatar
Jan 12th 2023

PWA is a nice thing to have. Main problem of PWA is; it is basically useless in javascript disabled situations, Open Graph support and SEO.. even with crawler bots' effort. SSR and SSG are current solutions but what if we don't use node.js server or static content? apache/nginx CMS systems are pretty common thing.

From my perspective; apache/nginx CMS can send first page's main content and after first page load, vue-router can handle the rest of routing. I know this isn't perfect functionality for most of cases but for me, it is enough to support all problems above.

Let me give an example of what is going on in my project;

This is my page's main content inside vue:

<main id="site_content"  v-html="currentcontent"></main>

Content is coming from CMS so it is sanitized. What I am doing right now;

<main id="site_content"> This is my example content. </main>
<div id="app"></div>

Sending content to outside of app's mounted element and deleting it with javascript. If javascript is disabled, it doesn't get deleted and PWA is not working so content is available for user.

I tried using this content instead of v-html for first page load with if (null == $router.options.history.state.back) {} but because of vue's internal system, it couldn't change page content because it was not rendered, I think. I am thinking I need some kind of hydration solution here.

avatar
Jan 12th 2023

I am thinking I need some kind of hydration solution here.

I agree. But your requirements are very vague from my perspective. This is, in its current state, not a feature request, this is a question on basically how to do client-side hydration of HMTL that comes from a CMS, not a server running Vue SSR on node.

Which, depending on your precise circumstances and requirments, could be totally possible with current features.

So I'll move this into dicussions where the community might discuss and hjelp out with your specific situation. Also consider visiting our discord.

If a more specific feature request comes from these interactions, feel free to open a new issue.