Nuxt/docs/content/3.api/1.composables/use-head.md
Conner 9fc848567e
docs: improve documentation (#4148)
Co-authored-by: pooya parsa <pyapar@gmail.com>
Co-authored-by: Clément Ollivier <clement.o2p@gmail.com>
Co-authored-by: Anjorin Damilare <damilareanjorin1@gmail.com>
2022-04-11 23:00:43 +02:00

2.0 KiB

useHead

::ReadMore{link="/guide/features/head-management"}

Nuxt provides a composable to update the head properties of your page with an MetaObject of meta properties with keys corresponding to meta tags:

title, base, script, style, meta and link, as well as htmlAttrs and bodyAttrs. Alternatively, you can pass a function returning the object for reactive metadata.

useHead(options: MetaObject)

::alert{icon=👉} useHead only works during setup. ::

Example

The example below changes the website's title in the meta and inserts a Google Font using the link property.

export default {
  setup () {
    useHead({
      meta: [
        { name: 'title' content: 'Nuxt 3 - The Hybrid Vue Framework' }
      ],
      link: [
        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', crossorigin: '' },
      ]
    })
  }
}

MetaObject

  • charset: the character encoding in which the document is encoded => <meta charset="<value>" /> (default: 'utf-8')
  • viewport: configuration of the viewport (the area of the window in which web content can be seen) => <meta name="viewport" content="<value>" /> (default: 'width=device-width, initial-scale=1')
  • meta: array, each item maps to a newly-created <meta> element, where object properties map to attributes.
  • link: array, each item maps to a newly-created <link> element, where object properties map to attributes.
  • style: array, each item maps to a newly-created <style> element, where object properties map to attributes.
  • script: array, each item maps to a newly-created <script> element, where object properties map to attributes.

All elements in the meta object are optional. You can also pass only single values.