useHeadNuxt provides the useHead composable to add and customize the head properties of individual pages of your Nuxt app. It uses @vueuse/head under the hood.
useHead only works during setup or Lifecycle Hooks.useHead(meta: Computable<MetaObject>): voidinterface MetaObject extends Record<string, any> { charset?: string viewport?: string meta?: Array<Record<string, any>> link?: Array<Record<string, any>> style?: Array<Record<string, any>> script?: Array<Record<string, any>> noscript?: Array<Record<string, any>> titleTemplate?: string | ((title: string) => string) title?: string bodyAttrs?: Record<string, any> htmlAttrs?: Record<string, any>}Application-wide configuration of the head metadata is possible through nuxt.config, or by placing the useHead in the app.vue file.
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.metaType: MetaObject
An object accepting the following head metadata:
charsetstringutf-8viewportstringwidth=device-width, initial-scale=1metaArray<Record<string, any>>width=device-width, initial-scale=1<meta> tag, where object properties are mapped to the corresponding attributes.linkArray<Record<string, any>><link> tag, where object properties are mapped to the corresponding attributes.styleArray<Record<string, any>><style> tag, where object properties are mapped to the corresponding attributes.scriptArray<Record<string, any>><script> tag, where object properties are mapped to the corresponding attributes.noscriptArray<Record<string, any>><noscript> tag, where object properties are mapped to the corresponding attributes.titleTemplatestring | ((title: string) => string)titlestringbodyAttrsRecord<string, any><body> tag. Each object property is mapped to the corresponding attribute.htmlAttrsRecord<string, any><html> tag. Each object property is mapped to the corresponding attribute.The example below changes the website's title and description using meta option of the useHead composable:
<script setup> const title = ref('My App') const description = ref('My amazing Nuxt app') useHead({ title, meta: [ { name: 'description', content: description } ] })</script>In the example below, titleTemplate is set either as a string with the %s placeholder or as a function, which allows greater flexibility in setting the page title dynamically for each route of your Nuxt app:
<script setup> useHead({ // as a string, // where `%s` is replaced with the title titleTemplate: '%s - Site Title', // ... or as a function titleTemplate: (productCategory) => { return productCategory ? `${productCategory} - Site Title` : 'Site Title' } })</script>nuxt.config is also used as an alternative way of setting the page title. However, nuxt.config does not allow the page title to be dynamic. Therefore, it is recommended to use titleTemplate in the app.vue file to add a dynamic title, which is then applied to all routes of your Nuxt app.
The example below inserts Google Fonts using the link property of the useHead composable:
<script setup> useHead({ link: [ { rel: 'preconnect', href: 'https://fonts.googleapis.com' }, { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', crossorigin: '' } ] })</script>The example below inserts a third-party script using the script property of the useHead composable:
<script setup> useHead({ script: [ { src: 'https://third-party-script.com', body: true } ] })</script>You can use the body: true option to add the above script at the end of the <body> tag.