Subscribe on changes!

Nested directive-less `<template>` doesn't render

avatar
Mar 29th 2023

Vue version

3.2.47

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9j8GKAjEQRH8l9mUvJoHdBWEQURD0I3JR0+joJB06GUVk/t1ERUYFj1XV1a/7ArMQ1LFFqGCc0IVmlXBivBBLbBoSJ+LGDowvzmue9UBKMSeM/icJRm+RhZQTsSCy6zM+u3lS96o9AUOoXSBO0q2C2kfy+YxLaZhHEA1U4uYUL99ZtIFdSiFWWrc+HLZqQ05Pc6a59al2KC256Z/6Vf8jbeuY+r7C6OSa6RSRM9HAsLdcZ/OILO/PIH+Fvc2+AN+yD2hhdsZ30F0B5eWC4g==

Steps to reproduce

<template>
  Hello world!

  <template>
    <!-- Doesn't render --> Goodbye world!
  </template>
</template>

What is expected?

For "Goodbye world!" to render.

Works in Vue 2: https://jsfiddle.net/otfqp5ey/

What is actually happening?

Doesn't render.

System Info

No response

Any additional comments?

I'm not actually trying to use <template>string</template>. But during development, I wrote that markup to see how the text looks to see whether I need to use a span[class=""] before adding a v-if, and was confused why it wasn't rendering.

Aside from that, I could see benefits for a directive-less <template> for organizational purposes.

avatar
Mar 29th 2023
avatar
Mar 29th 2023

Allowing a way to use native <template> makes sense and is cool, but the DX is quite unintuitive. I think most users would assume <template> to be a special Vue.js element.

Are there real use-cases for native <template> in Vue.js? Seems like there wouldn't/shouldn't be, given a major point of adopting Vue.js is to organize reusable templates into components.

Anyway, I think this is closable given changing this behavior would be breaking and is unlikely to happen.