How to render component from a string?

[ivanjaros]

I am contemplating a situation where i would write component template on backend server and return it in string form for the front-end to render. This is specifically for a case where i have page template that is dynamic in structure so i cannot have a static component to render it(and no, I cannot actually render it on the backend).

I know there is the h() function that can be used to render components. But from the looks of it, https://vuejs.org/guide/extras/render-function.html, there is no way to pass the "template" part of a vue file to it.

So how would I go about?

[ivanjaros]

Essentially the problem is that there is no way to compile a template, which can be passed on to the h() function along with props/attributes. The older version of Vue had the option to return template via render() function but that seems to be gone and the h() alone doesn't do anything in this regard. Essentially everything passed to h() must be an element. So having something like a list would require me to pass ul, li, li, li... into h() individually, which as i have said, means each html/vnode element must be separately passed to the h(), not a template as a whole. So I need to find a built-in function that handles the template parsing whenever a vue file is being loaded.

[ivanjaros]

Looks like this is the thing I am after, now only to figure out how to actually use it
https://github.com/vuejs/core/tree/main/packages/compiler-sfc

[ivanjaros]

So there is the compileTemplate function and I think the 'ast' field from returned object is what can be passed to the h(), but I have not figured out how, just yet.

[ivanjaros]

Here's an article on this exact thing https://medium.com/glovo-engineering/dissecting-vue-3-template-compilation-e01e2b98dafd

From what I have seen so far, this is proving to be impossible in Vue 3.

[jeffer80]

Do you want this?
https://github.com/jeffer80/dynamic-import-example/blob/main/packages/dynamic-import/index.js

But now, I can dynamically import a component from a URL/string, and the onServerPrefetch hook will not be executed.

[ivanjaros]

no, this does things with import. i am talking solely about dynamic component template.
right now i have solved this by simply having defined components in front-end and backend will target specific component for which it will send props, essentially.

[4refael]

It's actually quite simple to achieve:

<script setup>
import { ref } from 'vue'

const customTemplate = ref('<div>Runtime Template</div>')

setInterval(() => {
  // Simulate a template received from the server
  const newTemplate = `<div>Runtime Template: ${Math.random()}</div>`
  customTemplate.value = newTemplate
}, 500)
</script>

<template>
  <component :is="{ template: customTemplate }"></component>
</template>

https://play.vuejs.org/#eNp9U01r4zAQ/StCLCSB1C7s7sU4gd2lhy7sB22POtRrjxNlLclIoyTF+L93JGE3LaU3aWbe03tP0sC/9X129MALXrrayh6ZA/T9VmipemORDcxCy0bWWqPYgkYXQgtdG+2Q1d6hUQ+g+q5CYJswulyUjTxu77xGqYBNzTIP1cUqgOmEW41gj1W3XK7YZssGoRnLc3YvlY9UjWxbsKCR4cRuoQZ5hCYpcQQHG2BJiobThY7HdzUU7NPwq8J9ZivdGLVcjUnVY6R55SUjbT4wXfAKPa7Z1+tr8lDmKSyKiTaTRNoxVtaGgtNBeiHdRvBhtlC8DWwUfFvmM4DwZX5BxtccHdlr5S47OKPpkmJQggeI7MD+6VGSfcGLFGHoVV1nTj9jDa2H9VSv91D/f6d+cOdQE/yvhZiq4HMPK7sDTO2b+99wpvXcVKbxHU1/0LwDZzofNKax7143JPtiLqq9jU9N6t2DuzkjaDeZCkLD5BjnBafn9+MD6y9yP2dfIo7ujFJMT/lKVf2bHFPjNQmdkcTuEXtX5Dldx1P4IweXGbvLaZWBU1f/rDlRXsQo+HzW+AwqyCI2

Just make sure to use a Vue build with a runtime compiler, otherwise you'll get a warning for using the template option.

[ivanjaros]

that looks interesting. thanks. i won't be using it after all but it might come in handy in the future.