How do I use vue's template compilation

[woaixiaobo]

At present, I have implemented the functional writing method of vue to write widgets, but the template compilation method has failed, would like to ask if there is a method to achieve

[sdirix]

Hi! Can you go into more detail of the use case?

If I understand correctly, then you are trying to integrate Vue in a widget, however the build fails for you. Are you trying to integrate Vue (SFC) files as they are into the build? If yes, did you try to adapt the generated webpack configuration? The generated webpack.config.js is intended to be user modifiable, i.e. it will not be overwritten by Theia's tooling.

[woaixiaobo]

Yes, I am trying to integrate vue (SFC) into a widget, my example is as follows: template>

{{name}}

< /template>

< script lang="ts" setup>

import { ref } from 'vue'

const name = ref('Hello, Theia VUE!!!! ')

< /script>

Is a very simple SFC writing, I can now by changing the webpack file to compile and successfully introduced into the widget, but when I start the project is not rendered, indicating that I do not have a rendering function;

After two weeks of continuous attempts, I found that I could use the defineComponent global function to write vue syntax and hang the packaged component, because my requirements involved dragging, scaling and rotating of elements, and the content would have multiple elements. When I performed such operations on only one element, the page had obvious problems of stalling. Is it the theia frame itself? I am very smooth in normal vue scaffolding.

[sdirix]

Hi @woaixiaobo,

If I understand correctly, then you managed to get your Vue components to render, however you are experiencing performance issues. Is that correct?

There is nothing specific about Theia which should should impact performance. The main UI part of the app consists of phosphor.js widgets in which arbitrary HTML can be rendered.

Do you have a publicly available branch in which the problem can be reproduced?