useHead」タグアーカイブ

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で設定します。

code on a screen

Nuxt3でページにstyleを適用する

Nuxt3でページにスタイルを指定する方法についてです。

Headタグ使う

SFC内に以下のように記述する事でスタイル指定が可能です。

useHeadを使う

Composable APIを使ってscript setupに書くこともできます。

useHeadとStyleタグの両方を指定しても問題ないようです。両方の指定が出力されます。

参考リンク