Можно ли программно отрендерить vue компонент передав шаблон и параметры?

Question

[YuriKiin]

можно ли как то запустить рендер vue компонента программно? Например,

const html = renderVueComponent('{{ name }}', {
name: "Vasya"
})

чтобы в константе html лежало Vasya, главное чтобы функция renderVueComponent принимала первым параметром шаблон компонента с поддержкой директив vue. Реально ли такое сделать на vue?

Answer 1

[Алексей Ярков]

vue-runtime-template-compiler

Comments

[Алексей Ярков]

если ответ помог, то можете пометить решением )) Это лучшее спасибо на этом ресурсе.

Answer 2

[Aetae]

Vue работает с DOM, а не со строковым представлением.
Тупо смонтируй компонент в скрытый div и забери из него innerHTML.

Условно:

// версия с рантайм компилятором шаблонов
import { createApp } from 'vue/dist/vue.esm-bundler.js'; 

function renderVueComponent(template, data) {
  const div = document.createElement('div');
  
  createApp({
    template,
    data: () => data
  }).mount(div);

  return div.innerHTML;
}