OGP 動的画像生成に nuxt-og-image を使う

Vue Fes Japan 2023 でも来日、一スピーカーとして登壇された Harlan Wilton 氏 が中心となって、開発が進められています。 Vue Fes Japan 2023 公式 Web サイトでは、静的ビルド (nuxt generate) によって、スタティックな HTML を吐き出しています。 OGP 画像生成の下となるテンプレートを作る まず、nuxt-og-image を使う前提として experimental.componentIslands 機能をオンにする必要があります。 「コンポーネントアイランド」という概念で、Nuxt 3.1 より使えるようになっています。 /components/Og 配下に OgTemplate.vue を作成します。 コンポーネント名はもちろん、OgTemplate.vue を置くディレクトリ名を含め、個別にカスタマイズできます。