useHead · Nuxt コンポーザブル

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

ドキュメント > はじめに > 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/schema を参照してください。

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>

useFetch

SSR 対応のコンポーザブルで API エンドポイントからデータを取得します。

useHeadSafe

ユーザー入力で head データを提供する推奨される方法です。