useHead

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

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

Docs > 4 X > Getting Started > Seo Meta で詳細をお読みください。

タイプ

署名
export function 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

以下のヘッドメタデータを受け入れるオブジェクト

  • 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>