head

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

setGlobalHead function signature

setGlobalHead is a function that sets global head configuration for a Nuxt application. It accepts a single parameter 'head' of type AppHeadMetaObject and returns void. The function allows modules to programmatically configure meta tags, links, scripts, and other head elements that will be applied across all pages.

AppHeadMetaObject type definition

AppHeadMetaObject extends SerializableHead and includes the following optional properties: charset (character encoding for the document), viewport (viewport meta tag configuration), meta (array of meta tag objects), link (array of link tag objects for stylesheets and icons), style (array of inline style tag objects), script (array of script tag objects), noscript (array of noscript tag objects), title (default page title), titleTemplate (template for formatting page titles), bodyAttrs (attributes to add to the <body> tag), and htmlAttrs (attributes to add to the <html> tag). All properties are optional and will be merged with existing configuration using deep merging, with provided values taking precedence.

setGlobalHead merges with existing configuration

The head configuration provided to setGlobalHead is merged with any existing head configuration using deep merging. The provided values take precedence over existing configuration.

setGlobalHead example: adding global meta tags

Example of using setGlobalHead to add global meta tags: ```ts import { defineNuxtModule, setGlobalHead } from '@nuxt/kit' export default defineNuxtModule({ setup () { setGlobalHead({ meta: [ { name: 'theme-color', content: '#ffffff' }, { name: 'author', content: 'Your Name' }, ], }) }, }) ```

setGlobalHead example: injecting global stylesheets

Example of using setGlobalHead to inject global stylesheets: ```ts import { defineNuxtModule, setGlobalHead } from '@nuxt/kit' export default defineNuxtModule({ setup () { setGlobalHead({ link: [ { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap', }, ], }) }, }) ```

setGlobalHead example: adding global scripts

Example of using setGlobalHead to add global scripts: ```ts import { defineNuxtModule, setGlobalHead } from '@nuxt/kit' export default defineNuxtModule({ setup () { setGlobalHead({ script: [ { src: 'https://cdn.example.com/analytics.js', async: true, defer: true, }, ], }) }, }) ```

setGlobalHead example: setting HTML and body attributes

Example of using setGlobalHead to set HTML and body attributes: ```ts import { defineNuxtModule, setGlobalHead } from '@nuxt/kit' export default defineNuxtModule({ setup () { setGlobalHead({ htmlAttrs: { lang: 'en', dir: 'ltr', }, bodyAttrs: { class: 'custom-body-class', }, }) }, }) ```

Give your agent this brain