Zenn
📝

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

2023/06/25に公開
Nuxt
Nuxt 3
Nitro
tech

どういうときに使うの？

  • 遊び心でHTMLソースにAAを残したいとき

この間の方法とは何が違うの？

  • Vue側でコメントを出力させるのではなく、上流のNitroで出力させるようにしました
  • _nuxt内ではなく、ちゃんと<head>タグ内に出力させるようにしました

やり方

1. コメントを出力するNitroプラグインを書く

Nitroに用意されているHooksを利用します。今回は出力するHTMLを差し替えられるrender:htmlを使用します。

/server/plugins/appendComment.ts
export default defineNitroPlugin((nitroApp) => {
    nitroApp.hooks.hook('render:html', (html, { event }) => {
        html.head.unshift(`\n<!-- やったー！コメントが入力できるね -->\n`);
    });
});

2. Nitroプラグインを登録する

NitroプラグインをNuxt Configより登録します。

/nuxt.config.ts
export default defineNuxtConfig({
    nitro: {
        plugins: [
            '@/server/plugins/appendComment.ts',
        ],
    },
})

Discussion