Vue 구성 요소 내에서 Vue를 결합하여 HTML 렌더링

Question

저는 프로젝트를 Vue 2에서 Vue 3으로 업그레이드하려고 합니다. Vue 3에는 다양한 Vue 구성 요소 컬렉션이 포함된 구성 요소가 있습니다.

Vue 2에서 작동하는 방식은 Twig에서 Twig 템플릿(예: field.twig)을 호출하고 :is 속성과 Vue.compile 메소드(<div :is"compile(元素.内容）...“)를 사용하여 컴파일하기 위해 Vue로 보내는 것입니다.

Twig 템플릿이 Vue로 보내는 내용은 다음과 같습니다.

그러나 Vue 3에서는 이것이 더 이상 작동하지 않는 것 같습니다. 아무 것도 렌더링되지 않습니다. 템플릿에서 {{ element.content }}만 사용하면 원본 코드가 반환됩니다.

렌더링을 위해 html과 Vue를 혼합하는 여러 가지 방법(v-html, v-runtime-template)을 시도했지만 이들 중 어느 것도 문제를 해결하지 못하는 것 같습니다.

Vue 구성 요소: 컬렉션 구성 요소

Twig 템플릿: 컬렉션 템플릿

Answer 1

https://markus .oberlehner.net/blog/distributed-vue-applications-loading-comComponents-via-http/ 또는 https://www.npmjs.com/package/vue-runtime-을 시도해 볼 수 있습니다. template-compiler 하지만 이것이 Vue 3에서 작동할지 잘 모르겠습니다...