Vue html comment handling

Question

I'm using Vue to produce some html template, I need to include the html conditional comments as per code below.

var productTemplate = new Vue({
    el: '#myApp'
});

<script src="https://unpkg.com/vue@2.5.8/dist/vue.js"></script>

<div id="myApp">
    <div class="some-content">
        This is some content
    </div>

    <!--[if mso]>
      <div>
          this div will only be shown if the condition in the comment is true, in this case the condition is:
          if ( mso (microsoft office) == the html rendering engine) {
            show the html code between the [if mso] and the [endif]
          }
      </div>
    <![endif]-->

    <div class="some-other-content">
        This is some content
    </div>
</div>

But when I open my html page in the browser the html code between the conditional comment is completely removed even though I actually need it to be there.

How can I make Vue include these comments in the template's view?

@user2486 These conditional comments: https://www.sitepoint.com/internet-explorer-conditional-comments/ — Adriano, Nov 22 '17 at 04:33
I’m not sure vue is at fault here: if you remove the vue script include, does the issue still arise? — akatakritos, Nov 22 '17 at 05:05

score 16 · Accepted Answer · edited Jul 15 '22 at 20:08

16

In Vue 2.4.0+, you can set the comments option to true inside the component if you want to preserve comments in the component's template.

var productTemplate = new Vue({
    comments: true,  // <-- Add this
    el: '#myApp'
});

edited Jul 15 '22 at 20:08

tony19

125,647
18
229
307

answered Nov 22 '17 at 07:13

Decade Moon

32,968
8
81
101

You made my day – Jeremy Piednoel May 11 '18 at 19:18
Restrictions: This option is only available in the full build, with in-browser compilation. – Franck Freiburger Feb 15 '19 at 13:20
what a legend himself – Sweet Chilly Philly Nov 25 '20 at 21:31
Note for those who are using Vue 3 render function: there is a function called `createCommentVNode` – Duannx Jun 16 '22 at 09:29

He Wang · Answer 2 · 2017-11-22T12:37:16.037

~~Vue does delete the HTML comment.~~

One way I can think of is to bind your comments in a variable and output the variable through v-html directive.

EDIT: I tested it in a wrong dev env, so here is a link about the question from the Vue.js GitHub issue. https://github.com/vuejs/vue/issues/6177

var productTemplate = new Vue({
    el: '#myApp',
    comments: true,
    data: {
      comments: `    <!--[if mso]>
      <div>
          this div will only be shown if the condition in the comment is true, in this case the condition is:
          if ( mso (microsoft office) == the html rendering engine) {
            show the html code between the [if mso] and the [endif]
          }
      </div>
    <![endif]-->`
    }
});

<script src="https://unpkg.com/vue@2.5.8/dist/vue.js"></script>

<div id="myApp">
    <div class="some-content">
        This is some content
    </div>
    <!-- Comments -->
    <div v-html="comments"> {{ comments }} </div>

    <div class="some-other-content">
        This is some content
    </div>
</div>

Thanks. This was the best solution for my needs! – Cliff Helsel Dec 30 '19 at 20:42 — Cliff Helsel, Dec 30 '19 at 20:42
@CliffHelsel glad it still helps after 2 years. – He Wang Jan 09 '20 at 02:54 — He Wang, Jan 09 '20 at 02:54

Vue html comment handling

2 Answers2

Linked