一日一処: Nuxtでページタイトルが一生設定できなかった時の事実

Nuxtでのタイトル設定

Nuxtを使っているとき、タイトルを以下のような手段で設定していた。

<script setup>
	// useHeadを使用したパターン
	useHeat({ title: 'ページタイトル' })
	// SEOを使用他パターン
	useSeoMeta({ title: 'ページタイトル' })
</script>

上記のそれぞれの関数を用いた例で、ページのタイトルが設定できなかった。様々な観点で調べたが全く分からず、一日を経過した頃にようやく判明した。
犯人は、Nuxt Contentだった。

Nuxt Contentの利用

Nuxt Contentは、一定の情報をYAMLなど様々なデータ形式で保存し呼び出すことができる機能を持っている。あるプロジェクトでは、Vueのtemplate内で使用する文字列をリソースとしてNuxt Contentで管理していた。
Nuxt Contentでリソースを管理して、Vueで使用するために、以下のような記述を行っていた。

mypage.yaml

page:
	intro: 'このページの紹介文'

mypage.vue

<template>
	<ContentDoc v-slot="{ doc: { page } }" path="mypage.yaml">
		<p>{{ page.intro }}</p>
	</ContentDoc>
</template>

このように記述することで、YAMLファイルから文字列をリソースとして、ページ内に展開できる。ただし、このContentDocにはここに記述していない他の副作用がある。それが、ページタイトルへの処理だ。
この記述により、ページタイトルは、自動的にYAMLのファイル名のmypageとなる。これは、前述のタイトル設定を行っても常に上書きされる。

解決方法

この解決方法は、至って簡単で、ドキュメントにも記載があった。head属性の追加だ。

<ContentDoc v-slot="{ doc: { page } }" path="mypage.yaml" :head="false">

このようにhead属性にfalseを設定することで、内部で実行されるuseContentHeadの動作を無効化し、タイトルなどのメタ的な情報を展開しなくなる。更に、設定ファイルに追記することで、基本となる動作として設定することも可能なようだ。

理由の判明したきっかけ

Nuxt Contentのissueにて、同様のトピックが一年ほど前に存在していた。しかし、自動でメタ情報として展開されるのは少々罠なような気がするが、そもそもしっかりとドキュメントを読んでいれば、明記されていたわけなので、もっと早く解決できたと思う。