useHead

useHead は Nuxt アプリの個々のページの head プロパティをカスタマイズします。

useHead コンポーザブル関数は、Unhead によってプログラム的かつリアクティブに head タグを管理することを可能にします。データがユーザーや他の信頼できないソースから来る場合は、useHeadSafe を確認することをお勧めします。

こちらも参照 getting-started > seo-meta

型

useHead(meta: MaybeComputedRef<MetaObject>): void

以下は useHead の非リアクティブな型です。

interface MetaObject {
  title?: string
  titleTemplate?: string | ((title?: string) => string)
  base?: Base
  link?: Link[]
  meta?: Meta[]
  style?: Style[]
  script?: Script[]
  noscript?: Noscript[]
  htmlAttrs?: HtmlAttributes
  bodyAttrs?: BodyAttributes
}

より詳細な型については、@unhead/vue を参照してください。

useHead のプロパティは動的であり、ref、computed、reactive プロパティを受け入れることができます。meta パラメータは、オブジェクトを返す関数を受け入れることもでき、オブジェクト全体をリアクティブにします。

パラメータ

`meta`

型: MetaObject

以下の head メタデータを受け入れるオブジェクトです：

meta: 配列内の各要素は新しく作成された <meta> タグにマッピングされ、オブジェクトのプロパティは対応する属性にマッピングされます。
- 型: Array<Record<string, any>>
link: 配列内の各要素は新しく作成された <link> タグにマッピングされ、オブジェクトのプロパティは対応する属性にマッピングされます。
- 型: Array<Record<string, any>>
style: 配列内の各要素は新しく作成された <style> タグにマッピングされ、オブジェクトのプロパティは対応する属性にマッピングされます。
- 型: Array<Record<string, any>>
script: 配列内の各要素は新しく作成された <script> タグにマッピングされ、オブジェクトのプロパティは対応する属性にマッピングされます。
- 型: Array<Record<string, any>>
noscript: 配列内の各要素は新しく作成された <noscript> タグにマッピングされ、オブジェクトのプロパティは対応する属性にマッピングされます。
- 型: Array<Record<string, any>>
titleTemplate: 個々のページのタイトルをカスタマイズするための動的テンプレートを設定します。
- 型: string | ((title: string) => string)
title: 個々のページの静的なページタイトルを設定します。
- 型: string
bodyAttrs: <body> タグの属性を設定します。各オブジェクトプロパティは対応する属性にマッピングされます。
- 型: Record<string, any>
htmlAttrs: <html> タグの属性を設定します。各オブジェクトプロパティは対応する属性にマッピングされます。
- 型: Record<string, any>

※このページは Nuxt.js 公式ドキュメントの翻訳ページです。

公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/api/composables/use-head