🗒️
【Nuxt3】出力されるソースにHTMLコメントを残す方法
どういうときに使うの？
- HTMLコメントに依存する外部のJSライブラリを使うとき
- 遊び心でHTMLソースにAAを残したいとき
やり方
1. nuxt.config.ts に記述
Vue の コンパイラオプションをいじれば、ビルドした時にもコメントが残ります。
/nuxt.config.ts
export default defineNuxtConfig({
vue: {
compilerOptions: {
comments: true
}
}
})
2. コメントを記述するコンポーネントで comments 属性を追加
<template> タグに、コメントを残す属性 comments を付けると、その中でHTMLコメントが書けるようになります。
/components/foo.vue
<template comments>
<div>
<!-- このコメントを出力できるよ！ -->
</div>
</template>
Discussion