#html comments

10 messages · Page 1 of 1 (latest)

jolly elbow
#

How do I configure Astro or Vite to remove HTML comments in my Vue templates?

ancient frostBOT
#

Hi @jolly elbow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Hmm, I don't know enough to give you a confident answer yet. The provided knowledge sources do not contain specific information on configuring Astro or Vite to remove HTML comments in Vue templates. However, Astro does support standard HTML comments and JavaScript-style comments in its syntax. HTML-style comments will be included in the browser DOM, while JS ones will be skipped.

Here is an example of how comments are used in Astro:

<!-- HTML comment syntax is valid in .astro files -->
{/* JS comment syntax is also valid */}

For more detailed information, you may want to refer to the Astro Documentation (https://docs.astro.build/en/basics/astro-syntax/#differences-between-astro-and-jsx).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@jolly elbow kapa.ai is still learning and improving, please let us know how it did by reacting below

jolly elbow
#

@ancient frost how do I keep Astro from writing comments to my markup? I've got a bunch of "<!--astro:end-->" comments littered throughout my site --IN PROD!UCTION!

ancient frostBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Astro does not provide a built-in option to remove the <!--astro:end--> comments from the generated HTML. These comments are used by Astro to mark the boundaries of "islands" of HTML that are hydrated on the client-side.

However, Astro does provide an option to minify your HTML output, which can help reduce the size of your HTML files. By default, Astro removes whitespace from your HTML, including line breaks, from .astro components in a lossless manner. Some whitespace may be kept as needed to preserve the visual rendering of your HTML. This occurs both in development mode and in the final build.

To disable HTML compression, you can set compressHTML to false in your Astro configuration:

{
  compressHTML: false
}

For more information, you can refer to the Astro Configuration Reference (https://docs.astro.build/en/reference/configuration-reference/#compresshtml).

If you want to remove these comments, you might need to use a custom post-processing step in your build process. Please note that removing these comments might affect the hydration process of your Astro components.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@jolly elbow kapa.ai is still learning and improving, please let us know how it did by reacting below

jolly elbow
#

@ancient frost why? This is dumb. Whoever decided to tie islands to HTML comments is an idiot and deserves to be flogged. It would make more sense to tie hydration to the astro-island component itself. And, the compressHTML property does not work, and I've got a ton of whitespace in my markup ON PRODUCTION!

ancient frostBOT
#

Let me check the knowledge base for you. One moment! :books: