Nuxt3でページごとにタイトルを変える方法について記述します。正式リリースされていないので変わる可能性もゼロではないですが。
https://v3.nuxtjs.org/guide/features/head-management#title-templates
v3.nuxtjs.org
useHeadとtitleTemplateを使う
app.vueでtitleTemplateを使います。pagesディレクトリにページごとにコンポーネントを置く想定です。config.public.appNameにアプリケーション名を定義したとします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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> |
続いて、以下のようにページに定義します。
|
1 2 3 4 5 6 7 |
<script setup lang="ts"> useHead({ title: 'サンプルページ' }) </script> <template> <div>サンプルページ</div> </template> |
definePageMetaを使う
pageでtitleを定義して、例えばレイアウトとかでuseHeadで設定する。
pageでdefinePageMetaで定義する。
|
1 2 3 4 5 6 7 8 9 |
<script setup lang="ts"> definePageMeta({ title: 'Some Page', }) </script> <template> <div>サンプルページ</div> </template> |
レイアウトでmetaデータを取得しuseHeadで設定します。
|
1 2 3 4 |
<script lang="ts" setup> const route = useRoute() useHead({ title: route.meta.title as string }) </script> |
コメント