useHead · Nuxt Composables

useHead composable 函式允許您以程式化和反應式的方式管理 head 標籤，由 Unhead 提供支援。如果資料來自使用者或其他不受信任的來源，我們建議您查看 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 相容的 composable 從 API 端點擷取資料。

useHeadSafe

提供使用者輸入的 head 資料的建議方式。