How can I make <teleport> work with SSR?

[johnRivs]

I was told the Teleport component should be able to be rendered during SSR. I was trying to use it for meta tags and couldn't get it to work in but then I noticed my modals are not getting rendered in the server either. They're outside the component tree, as Vue expects.

Sorry if this doesn't belong here but I've asked in the Vue forums, Discord and Vite's repo with no luck :/

[frandiox]

I was trying to add support for teleports in SSR but found something that looks like a bug: vuejs/core#4440

Let's wait for some answers there.

I was trying to use it for meta tags

Why don't you use @vueuse/head for meta tags? 🤔

[johnRivs]

Turns out I had it in my package.json cause I tried it a while ago. Doesn't work with SSR which I guess has to do with the teleport bug? Maybe they use the same technique.

I also saw this issue vueuse/head#24

[frandiox]

It is working in the examples we have in this repo, though 🤔 At least with the composition API, I haven't tried with the options API :/

[johnRivs]

Oh I'm just dumb. I was going off the example in their repo instead of yours. I forgot to return { head }; in the hook.

[frandiox]

ah lol, so does it work now?

[johnRivs]

Yeah, thanks once again 😅

[johnRivs]

Did vuejs/core#5187 fix teleports working during SSR? Or is that only for async components? I'm stuck with hydration errors :/