How to ignore template tag?

[SpinyMan]

What problem does this feature solve?

Is there the ability to ignore template tag? Example: I use standard vue component that contains own template and other logic. But in the same time on the page other template tag exists and vue tries to parse it... How to avoid it?

<div id="app">
    <template class="bla-bla">
        <div><h1></h1></div>
    </template>
    <my-component></my-component>
</div>

What does the proposed API look like?

<template v-ignore>...</template>

[posva]

you should put those templates outside of vue div instead but you can also do

<template v-pre type="text/x-template">
  <div>hey {{ foo }}</div>
</template>

http://jsfiddle.net/xr2k61Le/

---

Please, next time consider using the forum, the Discord server or StackOverflow for questions first. But feel free to come back and open an issue if it turns out to be a bug 🙂

[SpinyMan]

you should put those templates outside of vue div instead but you can also do
<template v-pre type="text/x-template">hey {{ foo }}</template>

Please, next time consider using the forum, the Discord server or StackOverflow for questions first. But feel free to come back and open an issue if it turns out to be a bug 🙂

Sorry man, but this doesn't work as needed: it removes template tag but shouldn't... :(

[posva]

updated the comment with a demo but you should put the template outside

[SpinyMan]

updated the comment with a demo but you should put the template outside

It's not the way... I see the problem still exists not only for me... Maybe someone will make the template tag ignored by v-pre. Still waiting. And please reopen this issue.

[sirlancelot]

I'm not certain on a good use-case for this. When the root Vue component is mounted, there's an expectation that it will control everything within the node that it is attached to. Why do you want to break that convention? If there's a strong use-case I'm sure the maintainers would be inclined to re-open the issue. As it is now though, this seems unnecessary.

[SpinyMan]

<template v-pre> compiles into see screenshot
Is it ok that tr tag is not a child of #document-fragment. So I just want you fix it OR gimme any solution to resolve it.

[sirlancelot]

That appears to be a proper bug. The node isn't getting attached to the document fragment.

[SpinyMan]

That appears to be a proper bug. The node isn't getting attached to the document fragment.

So, will you help me?

[yyx990803]

<template> is used as a special construct in Vue template syntax - it serves as a generic logic container for v-if, v-for and slots.

As @posva suggested: the solution is moving your <template> outside of the parts controlled by Vue, which seems easy enough.

[SpinyMan]

which seems easy enough

Sorry but nope... I try to use laravel-admin with vue. And there no any way to move template tag outside... You have to fix vue src code for better work with <template v-pre>. I saw (on your forum) this problem is actual not only for me...

[stephantabor]

Here's my use case which lead me to this issue

I'm using a web component in vue, since it's allegedly compatible with web components

I have a template like this

<custom-element-table>
  <template>
    <thead>
      <!-- table head stuff-->
    </thead>
    <tbody>
      <!-- table body stuff-->
    </tbody>
  </template>
</custom-element-table>

from which i would expect DOM like this:

<custom-element-table>
  #shadow-root
  <template> <!-- in slot -->
    #document-fragment
      <thead>
        <!-- table head stuff-->
      </thead>
      <tbody>
        <!-- table body stuff-->
      </tbody>
  </template>
</custom-element-table>

but i get DOM like this, and a non functioning webcomponent:

<custom-element-table>
  #shadow-root
  <thead> <!-- in slot -->
    <!-- table head stuff-->
  </thead>
  <tbody>
    <!-- table body stuff-->
  </tbody>
</custom-element-table>

using v-pre on my custom element will render the template element as expected, but then i can't use any directives, so that is not a usable approach

IMO, for the same reason I can't make a vue component or custom element called div, Vue shouldn't be using a standard html tag () like this and then not allowing a way to bail out of that.

[stephantabor]

related #9427

[ukaaa]

I have the same use case. My own custom element relies on template tags. And now I can't use it at all.

@stephantabor: Did you find any way around it?

[stephantabor]

@ukaaa no i didn't, i ended up reimplementing it in vue. It seems that none of the major/popular front end frameworks can handle this at the moment (as you can see here: webcomponents/custom-elements-everywhere#234)

[ukaaa]

@stephantabor Too bad. I might look at creating my own template-like element or something. But it will never have the true benefits of a <template>, so I guess I could just make it any other element.

[projct1]

Same problem with Vue 3.
Cant use template-tag:

<body>
    ... some html
    <template id="calendar">
        <div class="flex gap-1 items-center">
            <x-icon name="calendar" />
            ...
        </div>
    </template>
    ... some html
</body>

createApp({
    mounted() {
        let tpl = document.getElementById('calendar')

        document.body.append(tpl.content.cloneNode(true)) //its not working
    }
}).mount(document.body)

document.addEventListener('DOMContentLoaded', () => {
    let tpl = document.getElementById('calendar')

    document.body.append(tpl.content.cloneNode(true)) //works fine
})

So nasty behaviour of Vue. How can disable it? Help me plz :)