Vue adds content in #document-fragment
P粉916760429
2023-08-31 09:43:47
<p>I'm using vue3 with nuxt3 and want to add a template tag with content in the generated <code>#document-fragment</code>. The generated HTML should look like this: </p>
<pre class="brush:php;toolbar:false;"><body>
<template id="some-id">
#document-fragment
<div>
...
</div>
</template>
</body></pre>
<p>When I use plain html it works great. In vue3, the element is not inside <code>#document-fragment</code> but below it, like this: </p>
<pre class="brush:php;toolbar:false;"><body>
<template id="some-id">
#document-fragment
<div>
...
</div>
</template>
</body></pre>
<p>My vue3 code looks like this (similar to html code): </p>
<pre class="brush:php;toolbar:false;"><template>
<v-app>
<template id="some-id">
<div></div>
</template>
</v-app>
</template></pre>
<p>Is there any way to put content into a <code>#document-fragment</code> element? </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I solved this problem by using ref on the template tag and then using the
renderfunction.const someRef: Ref<HTMLTemplateElement | undefined> = ref() onMounted(() => { if (someRef.value?.content) { // @ts-ignore render('div', someRef.value.content) } })If you want to insert a component, you can use it like this:
const someRef: Ref<HTMLTemplateElement | undefined> = ref() onMounted(() => { if (someRef.value?.content) { // @ts-ignore render(h(SomeComponent, { someProp: someValue }), someRef.value.content) } })There may be better ones, but it works for now.