useSchemaOrg
The useSchemaOrg
composable is the primary way to manage the head of the document at runtime.
useSchemaOrg(input, options)
Example
Add a page title and a meta description.
useSchemaOrg({
title: 'My Page',
meta: [
{
name: 'description',
content: 'My page description',
},
],
})
Input
interface Head<E extends MergeHead = SchemaAugmentations> {
title?: string | Promise<string>
titleTemplate?: string | null | ((title?: string) => string | null)
templateParams?: { separator?: string } & Record<string, string | Record<string, string>>
base?: Base<E['base']>
link?: Link<E['link']>[]
meta?: Meta<E['meta']>[]
style?: (Style<E['style']> | string)[]
script?: (Script<E['script']> | string)[]
noscript?: (Noscript<E['noscript']> | string)[]
htmlAttrs?: HtmlAttributes<E['htmlAttrs']>
bodyAttrs?: BodyAttributes<E['bodyAttrs']>
}
Options
The second argument to useSchemaOrg
is the HeadEntryOptions
. This allow you apply options to the entry, meaning all
tags that exist within the input
.
export interface HeadEntryOptions {
processTemplateParams?: boolean
tagPriority?: number | 'critical' | 'high' | 'low' | `before:${string}` | `after:${string}`
tagPosition?: 'head' | 'bodyClose' | 'bodyOpen'
mode?: RuntimeMode
transform?: (input: unknown) => unknown
head?: Unhead
}
mode
This lets you specify which mode the head should be applied in.
By default, entries are rendered in both server and client. If you'd like to only use a specific mode
you can set the mode
option to either server
or client
.
If you intend to server render tags you should instead opt for the useServerHead
composable.
Entry API
The useSchemaOrg
composable returns an API to manage the lifecycle of the head entry. Using this you can either patch
or
dispose
of the entry.
const myPageHead = useSchemaOrg({
title: 'My Page',
meta: [
{
name: 'description',
content: 'My page description',
},
],
})
// removes it
myPageHead.dispose()
XSS safety
The useSchemaOrg
function only applies minimal sanitization on input to improve the developer experience.
Be careful, do not use this function with any unknown / third party input, that isn't sanitised. It is not possible to guarantee that the output is safe when dealing with unknown input.
If you need XSS safety, sanitise your input or look at using the [useSeoMet If you're having issues working around the default nodes, you should disable them.
export default defineNuxtConfig({
schemaOrg: {
defaults: false
}
})
```a](/usage/composables/use-seo-meta) or [useSchemaOrgSafe](/usage/composables/use-head-safe) composables instead.