API Composables
useHeadSafe
The recommended way to provide head data with user input.
useHeadSafe
The useHeadSafe composable is a wrapper around the useHead composable that restricts the input to only allow safe values.
Usage
You can pass all the same values as useHead
useHeadSafe({ script: [ { id: 'xss-script', innerHTML: 'alert("xss")' } ], meta: [ { 'http-equiv': 'refresh', content: '0;javascript:alert(1)' } ]})// Will safely generate// <script id="xss-script"></script>// <meta content="0;javascript:alert(1)">Read more on unhead documentation.
Type
useHeadSafe(input: MaybeComputedRef<HeadSafe>): voidThe whitelist of safe values is:
export default { htmlAttrs: ['id', 'class', 'lang', 'dir'], bodyAttrs: ['id', 'class'], meta: ['id', 'name', 'property', 'charset', 'content'], noscript: ['id', 'textContent'], script: ['id', 'type', 'textContent'], link: ['id', 'color', 'crossorigin', 'fetchpriority', 'href', 'hreflang', 'imagesrcset', 'imagesizes', 'integrity', 'media', 'referrerpolicy', 'rel', 'sizes', 'type'],}See @unhead/schema for more detailed types.
useFetch
This composable provides a convenient wrapper around useAsyncData and $fetch. It automatically generates a key based on URL and fetch options, provides type hints for request url based on server routes, and infers API response type.
useHead
useHead customizes the head properties of individual pages of your Nuxt app.