Hi @humble cedar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#h rendering html
main valveBOT
Based on the knowledge sources provided, I can offer some insights into why your first code snippet might not be rendering as expected in Nuxt.
The issue you're experiencing is likely related to how Vue and Nuxt handle rendering of HTML content, especially during server-side rendering (SSR).
According to the Docs > Guide > Concepts > Rendering Modes > Universal Rendering, Nuxt uses universal rendering by default, which means the content is first rendered on the server and then hydrated on the client. This can sometimes lead to issues with dynamic content or innerHTML.
The reason your second code snippet works is that it's using a more Vue-friendly approach by mapping over elements and creating child components using h() function, which is better supported in both server and client environments.
For your first code snippet, you might want to consider using the v-html directive instead of innerHTML if you're working with static HTML content. However, be cautious when using v-html as it can expose you to XSS vulnerabilities if the content is not properly sanitized.
If you need to use innerHTML, you might need to ensure that this component is only rendered on the client-side. You can do this by wrapping it in a client-only component or using the client-only built-in component in Nuxt.
Here's a modified version of your first snippet that might work better:
<template>
<client-only>
<div v-html="'<p>test</p>'"></div>
</client-only>
</template>
<script setup>
// Your setup logic here
</script>
Remember, when working with Nuxt and Vue, it's generally better to use Vue's templating system or render functions that return Vue VNodes rather than raw HTML strings, as this allows Vue to properly manage the rendering and reactivity of your components.