Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-11 16:43:55 +00:00
Code Issues Packages Projects Releases Wiki Activity
24cf27e57b
Nuxt/docs/content/1.docs/3.api/1.composables/use-head.md
Sébastien Chopin 90784f79d7
docs: new website design (#9007) 
* docs: implement new website theme

* chore: rename dirs

* chore: update build

* lint fix

* chore: update deps

* fix: include node_modules in esbuild step

* chore: update deps

* Update .gitignore

* chore: update theme version

* up

* up

* fix: use svg for illustration

* chore: update to 0.0.12

* chore: force parse5 resolution

* stay with build

* feat: always display first home section

* Update yarn.lock

* chore: update theme

* fix lint

* docs: update home title

* chore: update website theme version

* Update docs/content/0.index.md

Co-authored-by: pooya parsa <pyapar@gmail.com>

* Update docs/content/0.index.md

Co-authored-by: pooya parsa <pyapar@gmail.com>

* up

* chore: bump theme version

* up

* chore: up

* up up and up

* chore: generate

* fix: boolean value

* feat: new images

* update again

* chore: up

* ouep

* chore: up

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Clément Ollivier <clement.o2p@gmail.com>
Co-authored-by: pooya parsa <pyapar@gmail.com>
2022-11-16 11:04:28 +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.