将 twig 变量传递给 Vue.js 3 组件

Question

我需要在现有的 Twig 模板上实现 Vue.js 3。问题是，如果我在 main.ts 上安装应用程序，它会自动覆盖主应用程序 div 中的所有内容。

main.ts：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.mount('#app');

main.html.twig：

<div id="app">
    <p>test</p>
</div>

这样 p 标签就会与我可能放置在那里的任何 Vue 组件一起被删除。

Vue.js 2 种方式如下：

const vm = new Vue({
  el: '#app',
  components: {},
});

这样我将每个 Vue 组件加载到 Vue 应用程序中，并且没有破坏应用程序 div 的内容。

在 Vue.js 3 上实现这个的方法是什么？

Answer 1

通过从

<template></template>

组件中删除

App.vue

部分使其工作。如果模板为空 - 它使用它所安装到的元素中的模板。