【Nuxt3】出力されるソースにHTMLコメントを残す方法

コメントを入れたいだけなら、より安定したやり方があります。 その場合は以下の記事を参考にしてください

https://zenn.dev/kakkokari_gtyih/articles/0f635f0b2d6446

どういうときに使うの？

• HTMLコメントに依存する外部のJSライブラリを使うとき
• 遊び心でHTMLソースにAAを残したいとき

やり方

1. nuxt.config.ts に記述

Vue の コンパイラオプションをいじれば、ビルドした時にもコメントが残ります。

https://ja.vuejs.org/api/application.html#app-config-compileroptions-comments

/nuxt.config.ts

export default defineNuxtConfig({
    vue: {
        compilerOptions: {
            comments: true
        }
    }
})

2. コメントを記述するコンポーネントで comments 属性を追加

<template> タグに、コメントを残す属性 comments を付けると、その中でHTMLコメントが書けるようになります。

/components/foo.vue

<template comments>
    <div>
        <!-- このコメントを出力できるよ！ -->
    </div>
</template>