data codes through eyeglasses

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

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

https://v3.nuxtjs.org/guide/features/head-management#title-templates

useHeadとtitleTemplateを使う

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

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

definePageMetaを使う

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

pageでdefinePageMetaで定義する。

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

カテゴリー: NuxtJS | タグ: | 投稿日: | 投稿者:

byebyehaikikyou について

産業機械系エンジニア→アフィリエイトWeb広告系のアプリ開発→PostgreSQL周辺機能の開発→企画開発(現在ここ) 地方でITエンジニアをしています。Webやスマフォアプリ、Hadoopなどのビッグデータに関するシステムに関わり、現在は企画開発などの業務。 日々のインプットを発信してます。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください