Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-13 17:43:59 +00:00
Code Issues Packages Projects Releases Wiki Activity
8732720221
Nuxt/docs/3.api/1.composables/use-head.md
Harlan Wilton 8732720221
perf(head): drop @vueuse/head dependency (#19519)
2023-03-08 07:32:24 -08:00

2.6 KiB
Raw Blame History

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

useHead

The useHead composable function allows you to manage your head tags in a programmatic and reactive way, powered by Unhead.

::ReadMore{link="/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.

::alert{type=info} 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. ::

Parameters

meta

Type: MetaObject

An object accepting the following head metadata:

  • meta

    Type: Array<Record<string, any>>

    Each element in the array is mapped to a newly-created <meta> tag, where object properties are mapped to the corresponding attributes.

  • link

    Type: Array<Record<string, any>>

    Each element in the array is mapped to a newly-created <link> tag, where object properties are mapped to the corresponding attributes.

  • style

    Type: Array<Record<string, any>>

    Each element in the array is mapped to a newly-created <style> tag, where object properties are mapped to the corresponding attributes.

  • script

    Type: Array<Record<string, any>>

    Each element in the array is mapped to a newly-created <script> tag, where object properties are mapped to the corresponding attributes.

  • noscript

    Type: Array<Record<string, any>>

    Each element in the array is mapped to a newly-created <noscript> tag, where object properties are mapped to the corresponding attributes.

  • titleTemplate

    Type: string | ((title: string) => string)

    Configures dynamic template to customize the page title on an individual page.

  • title

    Type: string

    Sets static page title on an individual page.

  • bodyAttrs

    Type: Record<string, any>

    Sets attributes of the <body> tag. Each object property is mapped to the corresponding attribute.

  • htmlAttrs

    Type: Record<string, any>

    Sets attributes of the <html> tag. Each object property is mapped to the corresponding attribute.