37% OFF during Black Friday at Mastering Nuxt.
55K

useHead

Source
useHead customizes the head properties of individual pages of your Nuxt app.

The useHead composable function allows you to manage your head tags in a programmatic and reactive way, powered by Unhead. If the data comes from a user or other untrusted source, we recommend you check out useHeadSafe.

Read more in Docs > Getting Started > Seo Meta.

Type

useHead(meta: MaybeComputedRef<MetaObject>): void

Below are the non-reactive types for 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
}

See @unhead/schema for more detailed types.

The properties of useHead can be dynamic, accepting ref, computed and reactive properties. meta parameter can also accept a function returning an object to make the entire object reactive.

Params

meta

Type: MetaObject

An object accepting the following head metadata:

  • meta: Each element in the array is mapped to a newly-created <meta> tag, where object properties are mapped to the corresponding attributes.
    • Type: Array<Record<string, any>>
  • link: Each element in the array is mapped to a newly-created <link> tag, where object properties are mapped to the corresponding attributes.
    • Type: Array<Record<string, any>>
  • style: Each element in the array is mapped to a newly-created <style> tag, where object properties are mapped to the corresponding attributes.
    • Type: Array<Record<string, any>>
  • script: Each element in the array is mapped to a newly-created <script> tag, where object properties are mapped to the corresponding attributes.
    • Type: Array<Record<string, any>>
  • noscript: Each element in the array is mapped to a newly-created <noscript> tag, where object properties are mapped to the corresponding attributes.
    • Type: Array<Record<string, any>>
  • titleTemplate: Configures dynamic template to customize the page title on an individual page.
    • Type: string | ((title: string) => string)
  • title: Sets static page title on an individual page.
    • Type: string
  • bodyAttrs: Sets attributes of the <body> tag. Each object property is mapped to the corresponding attribute.
    • Type: Record<string, any>
  • htmlAttrs: Sets attributes of the <html> tag. Each object property is mapped to the corresponding attribute.
    • Type: Record<string, any>

useFetch

Fetch data from an API endpoint with an SSR-friendly composable.

useHeadSafe

The recommended way to provide head data with user input.