Unable to render HTML comments in Components.

[Stubbs]

I have a Vue componentthat renders an article as HTML, a 3rd party requires that we indicate where in the page headlines and article content are with html comments, which show up locally on my dev server, but once deployed to our production server they dissapear, even though the code is actually builtin dev mode because vite.config has mode: 'development', gard coded into it. The build log confirms it;s in dev mode:

vite v6.0.6 building for development...

I also have app.config.compilerOptions.comments = true in app.js.

Yet the comments are not visible anywhere.

Is there another setting I'm missing that might be causing the comments not to be rendered?

[jh-leong]

Did you configure @vitejs/plugin-vue? Try this in your Vite config:

vue({
  template: {
    compilerOptions: {
      comments: true,
    },
  },
})

[Stubbs]

That's cracked it!

Any idea why setting the config in code like I had didn't work? I'm guessing I had the object structure wrong maybe?

[jh-leong]

app.config.compilerOptions applies to runtime compiler options, but in a Vite project, .vue files are compiled by @vitejs/plugin-vue. That’s why configuring it in your code didn’t work.