Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-11 08:33:53 +00:00
Code Issues Packages Projects Releases Wiki Activity
5eaeb4f83d
Nuxt/docs/3.api/1.composables/use-head.md
Sébastien Chopin 3ec108493d
docs: simplify the docs directory (#18506) 
* docs: simplify docs to only markdown

* Create nuxt-config.md

* chore: update

* chore: add readme
2023-01-25 10:41:41 +01:00

2.7 KiB
Raw Blame History

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

useHead

Nuxt provides the useHead composable to add and customize the head properties of individual pages of your Nuxt app.

useHead is powered by @vueuse/head, you can find more in-depth documentation here

::ReadMore{link="/docs/getting-started/seo-meta"} ::

Type

useHead(meta: MaybeComputedRef<MetaObject>): void

Below are the non-reactive types for useHead. See zhead for more detailed types.

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
}

::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.