0

Im trying to upgrade a project from Vue 2 to Vue 3 and there is a component in there with collections of different Vue components.

The way it worked in Vue 2 is by calling a Twig template (for example: field.twig) in Twig and sending that to Vue to compile using the :is attribute and Vue.compile method (<div :is"compile(element.content) ...").

This is what the Twig templates sends to Vue:

Screenshot of Twig template

However in Vue 3 this doesnt seem to work anymore. There is nothing getting rendered and if I just use {{ element.content }} in the template it returns the raw code.

I have tried multiple things to get the html mixed with Vue to render (v-html, v-runtime-template) but none of these seemed to fix the issue.

Vue Component: Collections Component

Twig Template: Collections Template

Joossieπ
  • 15
  • 8
  • Does this answer your question? [How to display string that contains HTML in twig template?](https://stackoverflow.com/questions/8355123/how-to-display-string-that-contains-html-in-twig-template) – DarkBee Feb 21 '22 at 16:36
  • No unfortunately not @DarkBee There is a Vue Component (Collections.vue) and this recieves HTML code (with a Vue Component embedded) from Twig. And that needs to be rendered inside Collections.vue. – Joossieπ Feb 22 '22 at 07:43
  • The twig template is rendered (serverside), before sending it off to Vue though? – DarkBee Feb 22 '22 at 07:54
  • Yes. But I dont need to display the string in Twig it needs to be displayed via Vue. The string only gets build in twig via a macro but it needs to be compiled in Vue. – Joossieπ Feb 22 '22 at 07:56

1 Answers1

0

You can try https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/ or https://www.npmjs.com/package/vue-runtime-template-compiler but I am not sure if these work in Vue 3 ...

IVO GELOV
  • 13,496
  • 1
  • 17
  • 26
  • Hi! I've already tried the Vue3 equivalent of the runtime template compiler and this didn't work because I cant store the string inside the data() method. The string is a object inside a for loop. – Joossieπ Feb 22 '22 at 12:36
  • Then you might need to compile the Twig templates to render functions or Web Components on the server and send these to your app. – IVO GELOV Feb 22 '22 at 14:40
  • This could solve it but how will I implement this when the string gets build via a Twig Macro. – Joossieπ Feb 22 '22 at 15:11
  • I am confused - you said that `the string is a object [inside a for loop]`. Perhaps you can convert those Vue components that are used by the Twig macro into Web Components - and then simply use `v-html` to render them ? – IVO GELOV Feb 22 '22 at 17:01
  • I already tried using the `v-html` for the string but the field component inside of that string is `...`. And `v-html` doesn't render components because it only renders html. It doesn't compile the Vue component. – Joossieπ Feb 24 '22 at 08:23
  • 1
    Perhaps you misread what I wrote - I suggested converting these Vue components that are used by Twig to WebComponents which will be registered by the root Vue instance of your app. Then you can render them in `v-html` and the browser will pickup the corresponding Web Component(s). – IVO GELOV Feb 24 '22 at 14:55
  • https://cwco.io/documentation – IVO GELOV Feb 25 '22 at 07:01