Nuxt3 ページごとにタイトルを変える

Nuxt3でページごとにタイトルを変える方法について記述します。正式リリースされていないので変わる可能性もゼロではないですが。

Page not found

We are sorry but this page could not be found.

v3.nuxtjs.org

useHeadとtitleTemplateを使う

app.vueでtitleTemplateを使います。pagesディレクトリにページごとにコンポーネントを置く想定です。config.public.appNameにアプリケーション名を定義したとします。

<script lang="ts" setup>
const config = useRuntimeConfig()

useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? ${titleChunk} - ${config.public.appName} : config.public.appName
  },
})
</script>

<template>
  <div>
    <NuxtLayout>
      <NuxtLoadingIndicator />
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

続いて、以下のようにページに定義します。

<script setup lang="ts">
useHead({ title: 'サンプルページ' })
</script>

<template>
  <div>サンプルページ</div>
</template>

definePageMetaを使う

pageでtitleを定義して、例えばレイアウトとかでuseHeadで設定する。

pageでdefinePageMetaで定義する。

<script setup lang="ts">
definePageMeta({
  title: 'Some Page',
})
</script>

<template>
  <div>サンプルページ</div>
</template>

レイアウトでmetaデータを取得しuseHeadで設定します。

<script lang="ts" setup>
const route = useRoute()
useHead({ title: route.meta.title as string })
</script>