From 1629a5cea57a01af762d10d17ad900f3ba8f2280 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 5 Oct 2022 15:10:40 +1100
Subject: [PATCH 01/28] feat(head): migrate to latest `@vueuse/head`

---
 packages/nuxt/package.json                    |   4 +-
 packages/nuxt/src/head/runtime/components.ts  |  10 +-
 packages/nuxt/src/head/runtime/composables.ts |  18 ++-
 .../head/runtime/lib/vueuse-head.plugin.ts    |  37 ++++--
 packages/schema/package.json                  |   1 +
 packages/schema/src/config/_app.ts            |   6 +-
 packages/schema/src/types/config.ts           |   4 +-
 packages/schema/src/types/meta.ts             | 111 +++++++++++++++---
 test/basic.test.ts                            |   3 +-
 yarn.lock                                     |  72 +++++++++---
 10 files changed, 204 insertions(+), 62 deletions(-)

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index 2fb8eb6579f..944a5903233 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -42,9 +42,9 @@
     "@nuxt/telemetry": "^2.1.5",
     "@nuxt/ui-templates": "^0.4.0",
     "@nuxt/vite-builder": "3.0.0-rc.11",
-    "@vue/reactivity": "^3.2.39",
+    "@vue/reactivity": "^3.2.40",
     "@vue/shared": "^3.2.39",
-    "@vueuse/head": "^0.7.12",
+    "@vueuse/head": "^0.9.6",
     "chokidar": "^3.5.3",
     "cookie-es": "^0.5.0",
     "defu": "^6.1.0",
diff --git a/packages/nuxt/src/head/runtime/components.ts b/packages/nuxt/src/head/runtime/components.ts
index db72e444ce8..ade52903efa 100644
--- a/packages/nuxt/src/head/runtime/components.ts
+++ b/packages/nuxt/src/head/runtime/components.ts
@@ -1,6 +1,6 @@
 import { defineComponent, PropType } from 'vue'
 import type { SetupContext } from 'vue'
-import { useHead } from './composables'
+import { useHeadRaw } from './composables'
 import type {
   Props,
   FetchPriority,
@@ -15,7 +15,7 @@ const removeUndefinedProps = (props: Props) =>
   Object.fromEntries(Object.entries(props).filter(([, value]) => value !== undefined))
 
 const setupForUseMeta = (metaFactory: (props: Props, ctx: SetupContext) => Record<string, any>, renderChild?: boolean) => (props: Props, ctx: SetupContext) => {
-  useHead(() => metaFactory({ ...removeUndefinedProps(props), ...ctx.attrs }, ctx))
+  useHeadRaw(() => metaFactory({ ...removeUndefinedProps(props), ...ctx.attrs }, ctx))
   return () => renderChild ? ctx.slots.default?.() : null
 }
 
@@ -97,7 +97,7 @@ export const Script = defineComponent({
       .map(({ children }) => children)
       .join('')
     if (textContent) {
-      script.children = textContent
+      script.innerHTML = textContent
     }
     return {
       script: [script]
@@ -120,7 +120,7 @@ export const NoScript = defineComponent({
       .map(({ children }) => children)
       .join('')
     if (textContent) {
-      noscript.children = textContent
+      noscript.innerHtml = textContent
     }
     return {
       noscript: [noscript]
@@ -244,7 +244,7 @@ export const Style = defineComponent({
       if (process.dev && typeof textContent !== 'string') {
         console.error('<Style> can only take a string in its default slot.')
       }
-      style.children = textContent
+      style.textContent = textContent
     }
     return {
       style: [style]
diff --git a/packages/nuxt/src/head/runtime/composables.ts b/packages/nuxt/src/head/runtime/composables.ts
index 8eaffa58283..24d0dfb496a 100644
--- a/packages/nuxt/src/head/runtime/composables.ts
+++ b/packages/nuxt/src/head/runtime/composables.ts
@@ -1,11 +1,9 @@
 import { isFunction } from '@vue/shared'
 import { computed } from 'vue'
-import type { ComputedGetter, ComputedRef } from '@vue/reactivity'
 import type { MetaObject } from '@nuxt/schema'
+import { MaybeComputedRef } from '@vueuse/shared'
 import { useNuxtApp } from '#app'
 
-type Computable<T> = T extends Record<string, any> ? ComputedGetter<T> | { [K in keyof T]: T[K] | ComputedRef<T[K]> } : T
-
 /**
  * You can pass in a meta object, which has keys corresponding to meta tags:
  * `title`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`.
@@ -13,13 +11,23 @@ type Computable<T> = T extends Record<string, any> ? ComputedGetter<T> | { [K in
  * Alternatively, for reactive meta state, you can pass in a function
  * that returns a meta object.
  */
-export function useHead (meta: Computable<MetaObject>) {
+export function useHead (meta: MaybeComputedRef<MetaObject>) {
   const resolvedMeta = isFunction(meta) ? computed(meta) : meta
   useNuxtApp()._useHead(resolvedMeta)
 }
 
+/**
+ * Same as `useHead` but will render meta tags without encoding.
+ *
+ * Warning: This function opens you up to XSS attacks. Only use this if you trust the source of the meta tag data.
+ */
+export function useHeadRaw (meta: MaybeComputedRef<MetaObject>) {
+  const resolvedMeta = isFunction(meta) ? computed(meta) : meta
+  useNuxtApp()._useHead(resolvedMeta, { raw: true })
+}
+
 // TODO: remove useMeta support when Nuxt 3 is stable
 /** @deprecated Please use new `useHead` composable instead */
-export function useMeta (meta: Computable<MetaObject>) {
+export function useMeta (meta: MaybeComputedRef<MetaObject>) {
   return useHead(meta)
 }
diff --git a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
index e1e6ebce866..26dab07b7a9 100644
--- a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
+++ b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
@@ -1,8 +1,9 @@
-import { createHead, renderHeadToString } from '@vueuse/head'
-import { computed, ref, watchEffect, onBeforeUnmount, getCurrentInstance, ComputedGetter } from 'vue'
+import { createHead, HeadEntryOptions, renderHeadToString } from '@vueuse/head'
+import { computed, ref, watchEffect, onBeforeUnmount, getCurrentInstance, isRef } from 'vue'
 import defu from 'defu'
-import type { MetaObject } from '..'
-import { defineNuxtPlugin } from '#app'
+import { MaybeComputedRef } from '@vueuse/shared'
+import type { MetaObject, MetaObjectPlain } from '@nuxt/schema'
+import { defineNuxtPlugin, useRouter } from '#app'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const head = createHead()
@@ -15,19 +16,35 @@ export default defineNuxtPlugin((nuxtApp) => {
     headReady = true
   })
 
-  nuxtApp._useHead = (_meta: MetaObject | ComputedGetter<MetaObject>) => {
-    const meta = ref<MetaObject>(_meta)
+  // pause dom updates in between page transitions
+  let pauseDOMUpdates = false
+  head.hookBeforeDomUpdate.push(() => !pauseDOMUpdates)
+  nuxtApp.hooks.hookOnce('page:finish', () => {
+    pauseDOMUpdates = false
+    // start pausing DOM updates when route changes (trigger immediately)
+    useRouter().beforeEach(() => {
+      pauseDOMUpdates = true
+    })
+    // watch for new route before unpausing dom updates (triggered after suspense resolved)
+    useRouter().afterEach(() => {
+      pauseDOMUpdates = false
+      head.updateDOM()
+    })
+  })
+
+  nuxtApp._useHead = (_meta: MaybeComputedRef<MetaObject>, options: HeadEntryOptions) => {
+    const meta = isRef(_meta) ? _meta : ref<MetaObject>(_meta as MetaObject)
     const headObj = computed(() => {
-      const overrides: MetaObject = { meta: [] }
+      const overrides: MetaObjectPlain = { meta: [] }
       if (meta.value.charset) {
-        overrides.meta!.push({ key: 'charset', charset: meta.value.charset })
+        overrides.meta!.push({ charset: meta.value.charset })
       }
       if (meta.value.viewport) {
         overrides.meta!.push({ name: 'viewport', content: meta.value.viewport })
       }
       return defu(overrides, meta.value)
     })
-    head.addHeadObjs(headObj as any)
+    const removeHeadObjs = head.addHeadObjs(headObj as any, options)
 
     if (process.server) { return }
 
@@ -39,7 +56,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     if (!vm) { return }
 
     onBeforeUnmount(() => {
-      head.removeHeadObjs(headObj as any)
+      removeHeadObjs()
       head.updateDOM()
     })
   }
diff --git a/packages/schema/package.json b/packages/schema/package.json
index dfb1d8fc6b7..122d43cf920 100644
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@@ -22,6 +22,7 @@
     "vite": "~3.1.3"
   },
   "dependencies": {
+    "@vueuse/head": "^0.9.5",
     "c12": "^0.2.13",
     "create-require": "^1.1.1",
     "defu": "^6.1.0",
diff --git a/packages/schema/src/config/_app.ts b/packages/schema/src/config/_app.ts
index a11bdd5e087..96bfb564def 100644
--- a/packages/schema/src/config/_app.ts
+++ b/packages/schema/src/config/_app.ts
@@ -3,7 +3,7 @@ import { existsSync, readdirSync } from 'node:fs'
 import defu from 'defu'
 import { defineUntypedSchema } from 'untyped'
 
-import { MetaObject } from '../types/meta'
+import {MetaObject, MetaObjectPlain} from '../types/meta'
 
 export default defineUntypedSchema({
   /**
@@ -112,7 +112,7 @@ export default defineUntypedSchema({
      */
     head: {
       $resolve: async (val, get) => {
-        const resolved: Required<MetaObject> = defu(val, await get('meta'), {
+        const resolved: Required<MetaObjectPlain> = defu(val, await get('meta'), {
           meta: [],
           link: [],
           style: [],
@@ -233,7 +233,7 @@ export default defineUntypedSchema({
   },
 
   /**
-   * @type {typeof import('../src/types/meta').MetaObject}
+   * @type {typeof import('../src/types/meta').MetaObjectPlain}
    * @version 3
    * @deprecated - use `head` instead
    */
diff --git a/packages/schema/src/types/config.ts b/packages/schema/src/types/config.ts
index 129844dcc47..c356c59394d 100644
--- a/packages/schema/src/types/config.ts
+++ b/packages/schema/src/types/config.ts
@@ -2,7 +2,7 @@ import type { KeepAliveProps, TransitionProps } from 'vue'
 import { ConfigSchema } from '../../schema/config'
 import type { ServerOptions as ViteServerOptions, UserConfig as ViteUserConfig } from 'vite'
 import type { Options as VuePluginOptions } from '@vitejs/plugin-vue'
-import type { MetaObject } from './meta'
+import type { MetaObjectPlain } from './meta'
 import type { Nuxt } from './nuxt'
 
 type DeepPartial<T> = T extends Function ? T : T extends Record<string, any> ? { [P in keyof T]?: DeepPartial<T[P]> } : T
@@ -82,7 +82,7 @@ export interface AppConfigInput extends Record<string, any> {
 }
 
 export interface NuxtAppConfig {
-  head: MetaObject
+  head: MetaObjectPlain
   layoutTransition: boolean | TransitionProps
   pageTransition: boolean | TransitionProps
   keepalive: boolean | KeepAliveProps
diff --git a/packages/schema/src/types/meta.ts b/packages/schema/src/types/meta.ts
index 1ae2d75854d..344e0f9db40 100644
--- a/packages/schema/src/types/meta.ts
+++ b/packages/schema/src/types/meta.ts
@@ -1,4 +1,18 @@
-export interface MetaObject extends Record<string, any> {
+import type { HeadObjectPlain, HeadObject } from '@vueuse/head'
+
+export interface HeadAugmentations {
+  // runtime type modifications
+  base?: {};
+  link?: {};
+  meta?: {};
+  style?: {};
+  script?: {};
+  noscript?: {};
+  htmlAttrs?: {};
+  bodyAttrs?: {};
+}
+
+export type MetaObjectPlain = HeadObjectPlain<HeadAugmentations> & {
   /**
    * The character encoding in which the document is encoded => `<meta charset="<value>" />`
    *
@@ -12,21 +26,84 @@ export interface MetaObject extends Record<string, any> {
    * @default `'width=device-width, initial-scale=1'`
    */
   viewport?: string
+}
 
-  /** Each item in the array maps to a newly-created `<meta>` element, where object properties map to attributes. */
-  meta?: Array<Record<string, any>>
-  /** Each item in the array maps to a newly-created `<link>` element, where object properties map to attributes. */
-  link?: Array<Record<string, any>>
-  /** Each item in the array maps to a newly-created `<style>` element, where object properties map to attributes. */
-  style?: Array<Record<string, any>>
-  /** Each item in the array maps to a newly-created `<script>` element, where object properties map to attributes. */
-  script?: Array<Record<string, any>>
-  /** Each item in the array maps to a newly-created `<noscript>` element, where object properties map to attributes. */
-  noscript?: Array<Record<string, any>>
-
-  titleTemplate?: string | ((title: string) => string)
-  title?: string
-
-  bodyAttrs?: Record<string, any>
-  htmlAttrs?: Record<string, any>
+export interface MetaObject {
+  /**
+   * The character encoding in which the document is encoded => `<meta charset="<value>" />`
+   *
+   * @default `'utf-8'`
+   */
+  charset?: string
+  /**
+   * Configuration of the viewport (the area of the window in which web content can be seen),
+   * mapped to => `<meta name="viewport" content="<value>" />`
+   *
+   * @default `'width=device-width, initial-scale=1'`
+   */
+  viewport?: string
+  /**
+   * The <title> HTML element defines the document's title that is shown in a browser's title bar or a page's tab.
+   * It only contains text; tags within the element are ignored.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title
+   */
+  title?: HeadObject<HeadAugmentations>['title'];
+  /**
+   * Generate the title from a template.
+   */
+  titleTemplate?: HeadObject<HeadAugmentations>['titleTemplate'];
+  /**
+   * The <base> HTML element specifies the base URL to use for all relative URLs in a document.
+   * There can be only one <base> element in a document.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+   */
+  base?: HeadObject<HeadAugmentations>['base'];
+  /**
+   * The <link> HTML element specifies relationships between the current document and an external resource.
+   * This element is most commonly used to link to stylesheets, but is also used to establish site icons
+   * (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-as
+   */
+  link?: HeadObject<HeadAugmentations>['link'];
+  /**
+   * The <meta> element represents metadata that cannot be expressed in other HTML elements, like <link> or <script>.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
+   */
+  meta?: HeadObject<HeadAugmentations>['meta'];
+  /**
+   * The <style> HTML element contains style information for a document, or part of a document.
+   * It contains CSS, which is applied to the contents of the document containing the <style> element.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
+   */
+  style?: HeadObject<HeadAugmentations>['style'];
+  /**
+   * The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
+   */
+  script?: HeadObject<HeadAugmentations>['script'];
+  /**
+   * The <noscript> HTML element defines a section of HTML to be inserted if a script type on the page is unsupported
+   * or if scripting is currently turned off in the browser.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
+   */
+  noscript?: HeadObject<HeadAugmentations>['noscript'];
+  /**
+   * Attributes for the <html> HTML element.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html
+   */
+  htmlAttrs?: HeadObject<HeadAugmentations>['htmlAttrs'];
+  /**
+   * Attributes for the <body> HTML element.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
+   */
+  bodyAttrs?: HeadObject<HeadAugmentations>['bodyAttrs'];
 }
diff --git a/test/basic.test.ts b/test/basic.test.ts
index cf143ddfe76..55d2b58eab7 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -219,6 +219,7 @@ describe('pages', () => {
 describe('head tags', () => {
   it('should render tags', async () => {
     const headHtml = await $fetch('/head')
+
     expect(headHtml).toContain('<title>Using a dynamic component - Title Template Fn Change</title>')
     expect(headHtml).not.toContain('<meta name="description" content="first">')
     expect(headHtml).toContain('<meta charset="utf-16">')
@@ -229,7 +230,7 @@ describe('head tags', () => {
     expect(headHtml).toContain('<meta name="description" content="overriding with an inline useHead call">')
     expect(headHtml).toMatch(/<html[^>]*class="html-attrs-test"/)
     expect(headHtml).toMatch(/<body[^>]*class="body-attrs-test"/)
-    expect(headHtml).toContain('script>console.log("works with useMeta too")</script>')
+    expect(headHtml).toContain('console.log(&quot;works with useMeta too&quot;)')
     expect(headHtml).toContain('<script src="https://a-body-appended-script.com" data-meta-body="true"></script></body>')
 
     const indexHtml = await $fetch('/')
diff --git a/yarn.lock b/yarn.lock
index 037e8468383..c3864a68176 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1712,6 +1712,7 @@ __metadata:
     "@types/lodash.template": ^4
     "@types/semver": ^7
     "@vitejs/plugin-vue": ^3.1.0
+    "@vueuse/head": ^0.9.5
     c12: ^0.2.13
     create-require: ^1.1.1
     defu: ^6.1.0
@@ -3209,7 +3210,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/reactivity@npm:3.2.39, @vue/reactivity@npm:^3.2.37, @vue/reactivity@npm:^3.2.39":
+"@vue/reactivity@npm:3.2.39, @vue/reactivity@npm:^3.2.37":
   version: 3.2.39
   resolution: "@vue/reactivity@npm:3.2.39"
   dependencies:
@@ -3218,6 +3219,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/reactivity@npm:^3.2.40":
+  version: 3.2.40
+  resolution: "@vue/reactivity@npm:3.2.40"
+  dependencies:
+    "@vue/shared": 3.2.40
+  checksum: 927d22b424b63a14234810a3b8e4e9127b7238a7cb2fbd749180279048a109348a29fc724fd9d636a6e09b5f4c902f71c789f081d3ab9b4473faedc6a03d7865
+  languageName: node
+  linkType: hard
+
 "@vue/runtime-core@npm:3.2.39":
   version: 3.2.39
   resolution: "@vue/runtime-core@npm:3.2.39"
@@ -3258,6 +3268,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/shared@npm:3.2.40":
+  version: 3.2.40
+  resolution: "@vue/shared@npm:3.2.40"
+  checksum: d91a1e12ffb106a444dcb42c0a54d39f6688f98151dc3b77e8da1e7d3cfd09e1761268d11e7f920f233b43162e727d06f3af4408ef59c53ac2dce9c1d2881511
+  languageName: node
+  linkType: hard
+
 "@vueuse/core@npm:9.2.0, @vueuse/core@npm:^9.2.0":
   version: 9.2.0
   resolution: "@vueuse/core@npm:9.2.0"
@@ -3270,14 +3287,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vueuse/head@npm:^0.7.12":
-  version: 0.7.12
-  resolution: "@vueuse/head@npm:0.7.12"
+"@vueuse/head@npm:^0.9.5, @vueuse/head@npm:^0.9.6":
+  version: 0.9.6
+  resolution: "@vueuse/head@npm:0.9.6"
   dependencies:
-    "@zhead/schema-vue": ^0.7.3
+    "@vueuse/shared": ^9.3.0
+    "@zhead/schema": ^0.8.5
+    "@zhead/schema-vue": ^0.8.5
   peerDependencies:
     vue: ">=2.7 || >=3"
-  checksum: cef1859c4200f1c25ddadf91e41ef870bbdadf85f85933b346d87575bc8039b469c208446ca604105a70a18d6173e9f6baa8ce276736f0291d297abe2e8820c1
+  checksum: 42e1f3a08387c9119e373e11030af37ffe3d913b109fce21060a8ac0bfe2dc115ea23d9c0dbf0f470838fc6fa9f4cd81f962c791d92480ce3cd45498ec5903fb
   languageName: node
   linkType: hard
 
@@ -3355,6 +3374,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vueuse/shared@npm:^9.3.0":
+  version: 9.3.0
+  resolution: "@vueuse/shared@npm:9.3.0"
+  dependencies:
+    vue-demi: "*"
+  checksum: c20fcfbbad3a17fa26191823f4022b7dd6f7a6e5ede648466562f3b9f4268fb417cd825ed002e2d74ef8f81971a3ca1691f35b4497676173b62c077b2a17d032
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/ast@npm:1.11.1":
   version: 1.11.1
   resolution: "@webassemblyjs/ast@npm:1.11.1"
@@ -3520,22 +3548,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@zhead/schema-vue@npm:^0.7.3":
-  version: 0.7.3
-  resolution: "@zhead/schema-vue@npm:0.7.3"
+"@zhead/schema-raw@npm:0.8.5":
+  version: 0.8.5
+  resolution: "@zhead/schema-raw@npm:0.8.5"
+  dependencies:
+    "@zhead/schema": 0.8.5
+  checksum: 5050beaf1ed818f3f13e77484e6c787943e730634ac81a5f53a2eef2d73517eb8784fe8996ca669de00b77b5d3dbe0296ddb2a8f0bba13e290ff46b349d73411
+  languageName: node
+  linkType: hard
+
+"@zhead/schema-vue@npm:^0.8.5":
+  version: 0.8.5
+  resolution: "@zhead/schema-vue@npm:0.8.5"
   dependencies:
     "@vueuse/shared": ^9.2.0
-    "@zhead/schema": 0.7.3
+    "@zhead/schema": 0.8.5
+    "@zhead/schema-raw": 0.8.5
   peerDependencies:
     vue: ">=2.7 || >=3"
-  checksum: 1fcb5447c3fcf08005a0b73a7f5a1eb62532aee5f58c7735e793b122a8d3877a0e21f67f88067bb6f0babb5defd34a831c78cb404f790e2c3b849addf85e54ed
+  checksum: 162e8f984ddfd47efc0118441c9656d77d2626a3a90562c2481665c1210f6df2c8e42b8d576914a566156f35ea0599b798c7f6452f8ac380e2263f6a7c106adb
   languageName: node
   linkType: hard
 
-"@zhead/schema@npm:0.7.3":
-  version: 0.7.3
-  resolution: "@zhead/schema@npm:0.7.3"
-  checksum: a6131bd3e667fb08c0e72722a9d7bad55b831526b1f6e2072123afd10e3d45507504c10ff8d84a1e1fa2e2b3e223a3a1938eb6bb220f07d2cfadc185862d677c
+"@zhead/schema@npm:0.8.5, @zhead/schema@npm:^0.8.5":
+  version: 0.8.5
+  resolution: "@zhead/schema@npm:0.8.5"
+  checksum: 9edb2c74e1e99607e982ad200c65c8c9d6acfe8557ac961d8defbb265abf822b93f6f44544ea01f3f7be9d6f6a48dae9e5745752ab83ed6a0555506a4af3223e
   languageName: node
   linkType: hard
 
@@ -10549,9 +10587,9 @@ __metadata:
     "@nuxt/vite-builder": 3.0.0-rc.11
     "@types/fs-extra": ^9.0.13
     "@types/hash-sum": ^1.0.0
-    "@vue/reactivity": ^3.2.39
+    "@vue/reactivity": ^3.2.40
     "@vue/shared": ^3.2.39
-    "@vueuse/head": ^0.7.12
+    "@vueuse/head": ^0.9.6
     chokidar: ^3.5.3
     cookie-es: ^0.5.0
     defu: ^6.1.0

From 52a8084b9054c64066fa96ee52fabe962830ee22 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 5 Oct 2022 20:44:17 +1100
Subject: [PATCH 02/28] fix: correct innerHTML casing

---
 packages/nuxt/src/head/runtime/components.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nuxt/src/head/runtime/components.ts b/packages/nuxt/src/head/runtime/components.ts
index ade52903efa..615def3749c 100644
--- a/packages/nuxt/src/head/runtime/components.ts
+++ b/packages/nuxt/src/head/runtime/components.ts
@@ -120,7 +120,7 @@ export const NoScript = defineComponent({
       .map(({ children }) => children)
       .join('')
     if (textContent) {
-      noscript.innerHtml = textContent
+      noscript.innerHTML = textContent
     }
     return {
       noscript: [noscript]

From e9bcdf8385e30009010adec1b9ad3f351f8dec6a Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 5 Oct 2022 20:48:44 +1100
Subject: [PATCH 03/28] revert: @vue/reactivity change

---
 yarn.lock | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index c3864a68176..8434e74e45b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3219,7 +3219,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/reactivity@npm:^3.2.40":
+"@vue/reactivity@npm:^3.2.39":
   version: 3.2.40
   resolution: "@vue/reactivity@npm:3.2.40"
   dependencies:
@@ -10587,7 +10587,7 @@ __metadata:
     "@nuxt/vite-builder": 3.0.0-rc.11
     "@types/fs-extra": ^9.0.13
     "@types/hash-sum": ^1.0.0
-    "@vue/reactivity": ^3.2.40
+    "@vue/reactivity": ^3.2.39
     "@vue/shared": ^3.2.39
     "@vueuse/head": ^0.9.6
     chokidar: ^3.5.3

From 55b736169780bfd383f1fe03bb1e675636b6a0a2 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 5 Oct 2022 20:48:50 +1100
Subject: [PATCH 04/28] revert: @vue/reactivity change

---
 packages/nuxt/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index 944a5903233..edbef692a2a 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -42,7 +42,7 @@
     "@nuxt/telemetry": "^2.1.5",
     "@nuxt/ui-templates": "^0.4.0",
     "@nuxt/vite-builder": "3.0.0-rc.11",
-    "@vue/reactivity": "^3.2.40",
+    "@vue/reactivity": "^3.2.39",
     "@vue/shared": "^3.2.39",
     "@vueuse/head": "^0.9.6",
     "chokidar": "^3.5.3",

From 871c4d27786503692eb11688f4bc8629a4baa20c Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 5 Oct 2022 20:48:59 +1100
Subject: [PATCH 05/28] fix: typecheck error

---
 packages/schema/src/config/_app.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/schema/src/config/_app.ts b/packages/schema/src/config/_app.ts
index 96bfb564def..c73284b1061 100644
--- a/packages/schema/src/config/_app.ts
+++ b/packages/schema/src/config/_app.ts
@@ -2,8 +2,7 @@ import { resolve, join } from 'pathe'
 import { existsSync, readdirSync } from 'node:fs'
 import defu from 'defu'
 import { defineUntypedSchema } from 'untyped'
-
-import {MetaObject, MetaObjectPlain} from '../types/meta'
+import { MetaObjectPlain } from '../types/meta'
 
 export default defineUntypedSchema({
   /**

From 2545cbb0e2e8160365bc4209b1aa5b5543e7ad87 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Fri, 7 Oct 2022 13:57:05 +1100
Subject: [PATCH 06/28] chore: polishing PR

---
 packages/nuxt/src/head/runtime/composables.ts |  8 +--
 .../head/runtime/lib/vueuse-head.plugin.ts    | 59 +++++++++++--------
 packages/schema/src/types/meta.ts             | 13 ----
 3 files changed, 35 insertions(+), 45 deletions(-)

diff --git a/packages/nuxt/src/head/runtime/composables.ts b/packages/nuxt/src/head/runtime/composables.ts
index 24d0dfb496a..91e203be984 100644
--- a/packages/nuxt/src/head/runtime/composables.ts
+++ b/packages/nuxt/src/head/runtime/composables.ts
@@ -1,5 +1,3 @@
-import { isFunction } from '@vue/shared'
-import { computed } from 'vue'
 import type { MetaObject } from '@nuxt/schema'
 import { MaybeComputedRef } from '@vueuse/shared'
 import { useNuxtApp } from '#app'
@@ -12,8 +10,7 @@ import { useNuxtApp } from '#app'
  * that returns a meta object.
  */
 export function useHead (meta: MaybeComputedRef<MetaObject>) {
-  const resolvedMeta = isFunction(meta) ? computed(meta) : meta
-  useNuxtApp()._useHead(resolvedMeta)
+  useNuxtApp()._useHead(meta)
 }
 
 /**
@@ -22,8 +19,7 @@ export function useHead (meta: MaybeComputedRef<MetaObject>) {
  * Warning: This function opens you up to XSS attacks. Only use this if you trust the source of the meta tag data.
  */
 export function useHeadRaw (meta: MaybeComputedRef<MetaObject>) {
-  const resolvedMeta = isFunction(meta) ? computed(meta) : meta
-  useNuxtApp()._useHead(resolvedMeta, { raw: true })
+  useNuxtApp()._useHead(meta, { raw: true })
 }
 
 // TODO: remove useMeta support when Nuxt 3 is stable
diff --git a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
index 26dab07b7a9..8ab60e081a6 100644
--- a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
+++ b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
@@ -1,6 +1,5 @@
 import { createHead, HeadEntryOptions, renderHeadToString } from '@vueuse/head'
-import { computed, ref, watchEffect, onBeforeUnmount, getCurrentInstance, isRef } from 'vue'
-import defu from 'defu'
+import { watchEffect, onBeforeUnmount, getCurrentInstance, isRef } from 'vue'
 import { MaybeComputedRef } from '@vueuse/shared'
 import type { MetaObject, MetaObjectPlain } from '@nuxt/schema'
 import { defineNuxtPlugin, useRouter } from '#app'
@@ -10,17 +9,13 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   nuxtApp.vueApp.use(head)
 
-  let headReady = false
-  nuxtApp.hooks.hookOnce('app:mounted', () => {
-    watchEffect(() => { head.updateDOM() })
-    headReady = true
-  })
-
-  // pause dom updates in between page transitions
-  let pauseDOMUpdates = false
+  // pause dom updates until page is ready and between page transitions
+  let pauseDOMUpdates = true
   head.hookBeforeDomUpdate.push(() => !pauseDOMUpdates)
-  nuxtApp.hooks.hookOnce('page:finish', () => {
+  nuxtApp.hooks.hookOnce('app:mounted', () => {
     pauseDOMUpdates = false
+    head.updateDOM()
+
     // start pausing DOM updates when route changes (trigger immediately)
     useRouter().beforeEach(() => {
       pauseDOMUpdates = true
@@ -32,31 +27,43 @@ export default defineNuxtPlugin((nuxtApp) => {
     })
   })
 
-  nuxtApp._useHead = (_meta: MaybeComputedRef<MetaObject>, options: HeadEntryOptions) => {
-    const meta = isRef(_meta) ? _meta : ref<MetaObject>(_meta as MetaObject)
-    const headObj = computed(() => {
-      const overrides: MetaObjectPlain = { meta: [] }
-      if (meta.value.charset) {
-        overrides.meta!.push({ charset: meta.value.charset })
+  nuxtApp._useHead = (_meta: MaybeComputedRef<MetaObject> | MetaObjectPlain, options: HeadEntryOptions) => {
+    const removeSideEffectFns: (() => void)[] = []
+
+    // Handle shortcuts from plain meta only (avoids ref packing / unpacking)
+    if (!isRef(_meta) && typeof _meta === 'object') {
+      const plainMeta = _meta as MetaObjectPlain
+      const shortcutMeta = []
+      if (plainMeta.charset) {
+        shortcutMeta.push({
+          charset: plainMeta.charset
+        })
       }
-      if (meta.value.viewport) {
-        overrides.meta!.push({ name: 'viewport', content: meta.value.viewport })
+      if (plainMeta.viewport) {
+        shortcutMeta.push({
+          name: 'viewport',
+          content: plainMeta.viewport
+        })
       }
-      return defu(overrides, meta.value)
-    })
-    const removeHeadObjs = head.addHeadObjs(headObj as any, options)
+      if (shortcutMeta.length) {
+        removeSideEffectFns.push(head.addHeadObjs({
+          meta: shortcutMeta
+        }))
+      }
+    }
+
+    removeSideEffectFns.push(head.addHeadObjs(_meta, options))
 
     if (process.server) { return }
 
-    if (headReady) {
-      watchEffect(() => { head.updateDOM() })
-    }
+    // will happen next tick
+    watchEffect(() => { head.updateDOM() })
 
     const vm = getCurrentInstance()
     if (!vm) { return }
 
     onBeforeUnmount(() => {
-      removeHeadObjs()
+      removeSideEffectFns.forEach(fn => fn())
       head.updateDOM()
     })
   }
diff --git a/packages/schema/src/types/meta.ts b/packages/schema/src/types/meta.ts
index 344e0f9db40..af0924f447c 100644
--- a/packages/schema/src/types/meta.ts
+++ b/packages/schema/src/types/meta.ts
@@ -29,19 +29,6 @@ export type MetaObjectPlain = HeadObjectPlain<HeadAugmentations> & {
 }
 
 export interface MetaObject {
-  /**
-   * The character encoding in which the document is encoded => `<meta charset="<value>" />`
-   *
-   * @default `'utf-8'`
-   */
-  charset?: string
-  /**
-   * Configuration of the viewport (the area of the window in which web content can be seen),
-   * mapped to => `<meta name="viewport" content="<value>" />`
-   *
-   * @default `'width=device-width, initial-scale=1'`
-   */
-  viewport?: string
   /**
    * The <title> HTML element defines the document's title that is shown in a browser's title bar or a page's tab.
    * It only contains text; tags within the element are ignored.

From 61f13aea65298aa82498f1ce7257fbf457b32cbf Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Fri, 7 Oct 2022 15:55:04 +1100
Subject: [PATCH 07/28] chore: bump @vueuse/head

---
 packages/nuxt/package.json   |  2 +-
 packages/schema/package.json |  2 +-
 yarn.lock                    | 12 ++++++------
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index edbef692a2a..587e80f085d 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -44,7 +44,7 @@
     "@nuxt/vite-builder": "3.0.0-rc.11",
     "@vue/reactivity": "^3.2.39",
     "@vue/shared": "^3.2.39",
-    "@vueuse/head": "^0.9.6",
+    "@vueuse/head": "^0.9.7",
     "chokidar": "^3.5.3",
     "cookie-es": "^0.5.0",
     "defu": "^6.1.0",
diff --git a/packages/schema/package.json b/packages/schema/package.json
index 122d43cf920..dc23af55ae4 100644
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@@ -22,7 +22,7 @@
     "vite": "~3.1.3"
   },
   "dependencies": {
-    "@vueuse/head": "^0.9.5",
+    "@vueuse/head": "^0.9.7",
     "c12": "^0.2.13",
     "create-require": "^1.1.1",
     "defu": "^6.1.0",
diff --git a/yarn.lock b/yarn.lock
index 8434e74e45b..267efebe841 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1712,7 +1712,7 @@ __metadata:
     "@types/lodash.template": ^4
     "@types/semver": ^7
     "@vitejs/plugin-vue": ^3.1.0
-    "@vueuse/head": ^0.9.5
+    "@vueuse/head": ^0.9.7
     c12: ^0.2.13
     create-require: ^1.1.1
     defu: ^6.1.0
@@ -3287,16 +3287,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vueuse/head@npm:^0.9.5, @vueuse/head@npm:^0.9.6":
-  version: 0.9.6
-  resolution: "@vueuse/head@npm:0.9.6"
+"@vueuse/head@npm:^0.9.7":
+  version: 0.9.7
+  resolution: "@vueuse/head@npm:0.9.7"
   dependencies:
     "@vueuse/shared": ^9.3.0
     "@zhead/schema": ^0.8.5
     "@zhead/schema-vue": ^0.8.5
   peerDependencies:
     vue: ">=2.7 || >=3"
-  checksum: 42e1f3a08387c9119e373e11030af37ffe3d913b109fce21060a8ac0bfe2dc115ea23d9c0dbf0f470838fc6fa9f4cd81f962c791d92480ce3cd45498ec5903fb
+  checksum: ab16d18fab046ca3791004e43ae80eb7cb41dc9d40923e5439d2e60f746038897d31442e2c1914d55670c50de892495212f04aabc2d7190950e4f80506ee2a56
   languageName: node
   linkType: hard
 
@@ -10589,7 +10589,7 @@ __metadata:
     "@types/hash-sum": ^1.0.0
     "@vue/reactivity": ^3.2.39
     "@vue/shared": ^3.2.39
-    "@vueuse/head": ^0.9.6
+    "@vueuse/head": ^0.9.7
     chokidar: ^3.5.3
     cookie-es: ^0.5.0
     defu: ^6.1.0

From 01ddd16fa495a95323ec833eae8f83955929c195 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Fri, 7 Oct 2022 15:55:18 +1100
Subject: [PATCH 08/28] fix: proper input types for `useHeadRaw`

---
 packages/nuxt/src/head/runtime/composables.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nuxt/src/head/runtime/composables.ts b/packages/nuxt/src/head/runtime/composables.ts
index 91e203be984..7df02300abe 100644
--- a/packages/nuxt/src/head/runtime/composables.ts
+++ b/packages/nuxt/src/head/runtime/composables.ts
@@ -1,5 +1,6 @@
 import type { MetaObject } from '@nuxt/schema'
 import { MaybeComputedRef } from '@vueuse/shared'
+import type { UseHeadRawInput } from '@vueuse/head'
 import { useNuxtApp } from '#app'
 
 /**
@@ -18,7 +19,7 @@ export function useHead (meta: MaybeComputedRef<MetaObject>) {
  *
  * Warning: This function opens you up to XSS attacks. Only use this if you trust the source of the meta tag data.
  */
-export function useHeadRaw (meta: MaybeComputedRef<MetaObject>) {
+export function useHeadRaw (meta: UseHeadRawInput) {
   useNuxtApp()._useHead(meta, { raw: true })
 }
 

From f29cd621705e3f715b8c361fc398e917837ed28a Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Fri, 7 Oct 2022 18:53:23 +1100
Subject: [PATCH 09/28] feat(components): add `body` and `renderPriority`
 support

---
 packages/nuxt/src/head/runtime/components.ts | 38 +++++++++++++-------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/nuxt/src/head/runtime/components.ts b/packages/nuxt/src/head/runtime/components.ts
index 615def3749c..75e09423d65 100644
--- a/packages/nuxt/src/head/runtime/components.ts
+++ b/packages/nuxt/src/head/runtime/components.ts
@@ -1,13 +1,13 @@
-import { defineComponent, PropType } from 'vue'
-import type { SetupContext } from 'vue'
+import { defineComponent } from 'vue'
+import type { PropType, SetupContext } from 'vue'
 import { useHeadRaw } from './composables'
 import type {
-  Props,
-  FetchPriority,
   CrossOrigin,
+  FetchPriority,
   HTTPEquiv,
-  ReferrerPolicy,
   LinkRelationship,
+  Props,
+  ReferrerPolicy,
   Target
 } from './types'
 
@@ -88,7 +88,9 @@ export const Script = defineComponent({
     /** @deprecated **/
     charset: String,
     /** @deprecated **/
-    language: String
+    language: String,
+    body: Boolean,
+    renderPriority: [String, Number]
   },
   setup: setupForUseMeta((props, { slots }) => {
     const script = { ...props }
@@ -111,7 +113,9 @@ export const NoScript = defineComponent({
   inheritAttrs: false,
   props: {
     ...globalProps,
-    title: String
+    title: String,
+    body: Boolean,
+    renderPriority: [String, Number]
   },
   setup: setupForUseMeta((props, { slots }) => {
     const noscript = { ...props }
@@ -157,7 +161,9 @@ export const Link = defineComponent({
     /** @deprecated **/
     methods: String,
     /** @deprecated **/
-    target: String as PropType<Target>
+    target: String as PropType<Target>,
+    body: Boolean,
+    renderPriority: [String, Number]
   },
   setup: setupForUseMeta(link => ({
     link: [link]
@@ -205,7 +211,9 @@ export const Meta = defineComponent({
     charset: String,
     content: String,
     httpEquiv: String as PropType<HTTPEquiv>,
-    name: String
+    name: String,
+    body: Boolean,
+    renderPriority: [String, Number]
   },
   setup: setupForUseMeta((props) => {
     const meta = { ...props }
@@ -235,7 +243,9 @@ export const Style = defineComponent({
     scoped: {
       type: Boolean,
       default: undefined
-    }
+    },
+    body: Boolean,
+    renderPriority: [String, Number]
   },
   setup: setupForUseMeta((props, { slots }) => {
     const style = { ...props }
@@ -269,7 +279,8 @@ export const Html = defineComponent({
     ...globalProps,
     manifest: String,
     version: String,
-    xmlns: String
+    xmlns: String,
+    renderPriority: [String, Number]
   },
   setup: setupForUseMeta(htmlAttrs => ({ htmlAttrs }), true)
 })
@@ -279,6 +290,9 @@ export const Body = defineComponent({
   // eslint-disable-next-line vue/no-reserved-component-names
   name: 'Body',
   inheritAttrs: false,
-  props: globalProps,
+  props: {
+    ...globalProps,
+    renderPriority: [String, Number]
+  },
   setup: setupForUseMeta(bodyAttrs => ({ bodyAttrs }), true)
 })

From b4db8063bc1015a19638b9c200fa74b1487c5987 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Fri, 7 Oct 2022 18:53:46 +1100
Subject: [PATCH 10/28] fix: pause dom updates in client only

---
 .../head/runtime/lib/vueuse-head.plugin.ts    | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
index 8ab60e081a6..b276a26b4eb 100644
--- a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
+++ b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
@@ -9,23 +9,25 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   nuxtApp.vueApp.use(head)
 
-  // pause dom updates until page is ready and between page transitions
-  let pauseDOMUpdates = true
-  head.hookBeforeDomUpdate.push(() => !pauseDOMUpdates)
-  nuxtApp.hooks.hookOnce('app:mounted', () => {
-    pauseDOMUpdates = false
-    head.updateDOM()
-
-    // start pausing DOM updates when route changes (trigger immediately)
-    useRouter().beforeEach(() => {
-      pauseDOMUpdates = true
-    })
-    // watch for new route before unpausing dom updates (triggered after suspense resolved)
-    useRouter().afterEach(() => {
+  if (process.client) {
+    // pause dom updates until page is ready and between page transitions
+    let pauseDOMUpdates = true
+    head.hookBeforeDomUpdate.push(() => !pauseDOMUpdates)
+    nuxtApp.hooks.hookOnce('app:mounted', () => {
       pauseDOMUpdates = false
       head.updateDOM()
+
+      // start pausing DOM updates when route changes (trigger immediately)
+      useRouter().beforeEach(() => {
+        pauseDOMUpdates = true
+      })
+      // watch for new route before unpausing dom updates (triggered after suspense resolved)
+      useRouter().afterEach(() => {
+        pauseDOMUpdates = false
+        head.updateDOM()
+      })
     })
-  })
+  }
 
   nuxtApp._useHead = (_meta: MaybeComputedRef<MetaObject> | MetaObjectPlain, options: HeadEntryOptions) => {
     const removeSideEffectFns: (() => void)[] = []

From 62c476ba90e112d2bf8b220f7594fb93395d2f66 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 11 Oct 2022 15:44:36 +1100
Subject: [PATCH 11/28] chore: upgrade to @vueuse/head 1.0.0-rc.4

---
 packages/nuxt/package.json                    |  2 +-
 packages/nuxt/src/head/runtime/components.ts  |  6 ++--
 .../head/runtime/lib/vueuse-head.plugin.ts    | 28 ++++++++++---------
 packages/schema/package.json                  |  2 +-
 yarn.lock                                     | 12 ++++----
 5 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index 587e80f085d..152cbea1051 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -44,7 +44,7 @@
     "@nuxt/vite-builder": "3.0.0-rc.11",
     "@vue/reactivity": "^3.2.39",
     "@vue/shared": "^3.2.39",
-    "@vueuse/head": "^0.9.7",
+    "@vueuse/head": "1.0.0-rc.4",
     "chokidar": "^3.5.3",
     "cookie-es": "^0.5.0",
     "defu": "^6.1.0",
diff --git a/packages/nuxt/src/head/runtime/components.ts b/packages/nuxt/src/head/runtime/components.ts
index 75e09423d65..027988e50dd 100644
--- a/packages/nuxt/src/head/runtime/components.ts
+++ b/packages/nuxt/src/head/runtime/components.ts
@@ -99,7 +99,7 @@ export const Script = defineComponent({
       .map(({ children }) => children)
       .join('')
     if (textContent) {
-      script.innerHTML = textContent
+      script.children = textContent
     }
     return {
       script: [script]
@@ -124,7 +124,7 @@ export const NoScript = defineComponent({
       .map(({ children }) => children)
       .join('')
     if (textContent) {
-      noscript.innerHTML = textContent
+      noscript.children = textContent
     }
     return {
       noscript: [noscript]
@@ -254,7 +254,7 @@ export const Style = defineComponent({
       if (process.dev && typeof textContent !== 'string') {
         console.error('<Style> can only take a string in its default slot.')
       }
-      style.textContent = textContent
+      style.children = textContent
     }
     return {
       style: [style]
diff --git a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
index b276a26b4eb..86efc300eae 100644
--- a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
+++ b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
@@ -1,5 +1,6 @@
-import { createHead, HeadEntryOptions, renderHeadToString } from '@vueuse/head'
-import { watchEffect, onBeforeUnmount, getCurrentInstance, isRef } from 'vue'
+import type { HeadEntryOptions, HeadObjectApi } from '@vueuse/head'
+import { createHead, renderHeadToString } from '@vueuse/head'
+import { onBeforeUnmount, getCurrentInstance, isRef } from 'vue'
 import { MaybeComputedRef } from '@vueuse/shared'
 import type { MetaObject, MetaObjectPlain } from '@nuxt/schema'
 import { defineNuxtPlugin, useRouter } from '#app'
@@ -12,7 +13,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   if (process.client) {
     // pause dom updates until page is ready and between page transitions
     let pauseDOMUpdates = true
-    head.hookBeforeDomUpdate.push(() => !pauseDOMUpdates)
+    head.hooks['before:dom'].push(() => !pauseDOMUpdates)
     nuxtApp.hooks.hookOnce('app:mounted', () => {
       pauseDOMUpdates = false
       head.updateDOM()
@@ -30,7 +31,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   }
 
   nuxtApp._useHead = (_meta: MaybeComputedRef<MetaObject> | MetaObjectPlain, options: HeadEntryOptions) => {
-    const removeSideEffectFns: (() => void)[] = []
+    const removeSideEffectFns: HeadObjectApi[] = []
 
     // Handle shortcuts from plain meta only (avoids ref packing / unpacking)
     if (!isRef(_meta) && typeof _meta === 'object') {
@@ -48,31 +49,32 @@ export default defineNuxtPlugin((nuxtApp) => {
         })
       }
       if (shortcutMeta.length) {
-        removeSideEffectFns.push(head.addHeadObjs({
+        removeSideEffectFns.push(head.addEntry({
           meta: shortcutMeta
         }))
       }
     }
 
-    removeSideEffectFns.push(head.addHeadObjs(_meta, options))
-
-    if (process.server) { return }
+    if (process.server) {
+      head.addEntry(_meta, options)
+      return
+    }
 
-    // will happen next tick
-    watchEffect(() => { head.updateDOM() })
+    const cleanUp = head.addReactiveEntry(_meta, options)
 
     const vm = getCurrentInstance()
     if (!vm) { return }
 
     onBeforeUnmount(() => {
-      removeSideEffectFns.forEach(fn => fn())
+      cleanUp()
+      removeSideEffectFns.forEach(fn => fn.remove())
       head.updateDOM()
     })
   }
 
   if (process.server) {
-    nuxtApp.ssrContext!.renderMeta = () => {
-      const meta = renderHeadToString(head)
+    nuxtApp.ssrContext!.renderMeta = async () => {
+      const meta = await renderHeadToString(head)
       return {
         ...meta,
         // resolves naming difference with NuxtMeta and @vueuse/head
diff --git a/packages/schema/package.json b/packages/schema/package.json
index dc23af55ae4..199f88db355 100644
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@@ -22,7 +22,7 @@
     "vite": "~3.1.3"
   },
   "dependencies": {
-    "@vueuse/head": "^0.9.7",
+    "@vueuse/head": "1.0.0-rc.4",
     "c12": "^0.2.13",
     "create-require": "^1.1.1",
     "defu": "^6.1.0",
diff --git a/yarn.lock b/yarn.lock
index 267efebe841..3deb0b17c13 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1712,7 +1712,7 @@ __metadata:
     "@types/lodash.template": ^4
     "@types/semver": ^7
     "@vitejs/plugin-vue": ^3.1.0
-    "@vueuse/head": ^0.9.7
+    "@vueuse/head": 1.0.0-rc.4
     c12: ^0.2.13
     create-require: ^1.1.1
     defu: ^6.1.0
@@ -3287,16 +3287,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vueuse/head@npm:^0.9.7":
-  version: 0.9.7
-  resolution: "@vueuse/head@npm:0.9.7"
+"@vueuse/head@npm:1.0.0-rc.4":
+  version: 1.0.0-rc.4
+  resolution: "@vueuse/head@npm:1.0.0-rc.4"
   dependencies:
     "@vueuse/shared": ^9.3.0
     "@zhead/schema": ^0.8.5
     "@zhead/schema-vue": ^0.8.5
   peerDependencies:
     vue: ">=2.7 || >=3"
-  checksum: ab16d18fab046ca3791004e43ae80eb7cb41dc9d40923e5439d2e60f746038897d31442e2c1914d55670c50de892495212f04aabc2d7190950e4f80506ee2a56
+  checksum: debbdbc15a7d94b5a8ade227ba2e8e6b4fa9c562a0de68939f2e585adf2c9897d5420d314f69232090520fbb3f4d1c473381c2bed94de6dfacc0700ba5f87fae
   languageName: node
   linkType: hard
 
@@ -10589,7 +10589,7 @@ __metadata:
     "@types/hash-sum": ^1.0.0
     "@vue/reactivity": ^3.2.39
     "@vue/shared": ^3.2.39
-    "@vueuse/head": ^0.9.7
+    "@vueuse/head": 1.0.0-rc.4
     chokidar: ^3.5.3
     cookie-es: ^0.5.0
     defu: ^6.1.0

From efe084ca6ab0b5856e81c4d574731aa1fb2e65af Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 11 Oct 2022 15:49:54 +1100
Subject: [PATCH 12/28] chore: sync lock file

---
 yarn.lock | 52 +++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 66f188a2d70..26520542a28 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1835,6 +1835,7 @@ __metadata:
     "@types/lodash.template": ^4
     "@types/semver": ^7
     "@vitejs/plugin-vue": ^3.1.2
+    "@vueuse/head": 1.0.0-rc.4
     c12: ^0.2.13
     create-require: ^1.1.1
     defu: ^6.1.0
@@ -3460,14 +3461,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vueuse/head@npm:^0.7.12":
-  version: 0.7.13
-  resolution: "@vueuse/head@npm:0.7.13"
+"@vueuse/head@npm:1.0.0-rc.4":
+  version: 1.0.0-rc.4
+  resolution: "@vueuse/head@npm:1.0.0-rc.4"
   dependencies:
-    "@zhead/schema-vue": ^0.7.3
+    "@vueuse/shared": ^9.3.0
+    "@zhead/schema": ^0.8.5
+    "@zhead/schema-vue": ^0.8.5
   peerDependencies:
     vue: ">=2.7 || >=3"
-  checksum: 90f755536a83ebcc292b43abcb3e18ae03db127916c75383c58ba06c0829bb979aee26cf162fa9b9e8a58a6fcf1f01966fefde4fc2d4ba991949f000a24dc86b
+  checksum: debbdbc15a7d94b5a8ade227ba2e8e6b4fa9c562a0de68939f2e585adf2c9897d5420d314f69232090520fbb3f4d1c473381c2bed94de6dfacc0700ba5f87fae
   languageName: node
   linkType: hard
 
@@ -3545,6 +3548,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vueuse/shared@npm:^9.3.0":
+  version: 9.3.0
+  resolution: "@vueuse/shared@npm:9.3.0"
+  dependencies:
+    vue-demi: "*"
+  checksum: c20fcfbbad3a17fa26191823f4022b7dd6f7a6e5ede648466562f3b9f4268fb417cd825ed002e2d74ef8f81971a3ca1691f35b4497676173b62c077b2a17d032
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/ast@npm:1.11.1":
   version: 1.11.1
   resolution: "@webassemblyjs/ast@npm:1.11.1"
@@ -3727,22 +3739,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@zhead/schema-vue@npm:^0.7.3":
-  version: 0.7.4
-  resolution: "@zhead/schema-vue@npm:0.7.4"
+"@zhead/schema-raw@npm:0.8.5":
+  version: 0.8.5
+  resolution: "@zhead/schema-raw@npm:0.8.5"
+  dependencies:
+    "@zhead/schema": 0.8.5
+  checksum: 5050beaf1ed818f3f13e77484e6c787943e730634ac81a5f53a2eef2d73517eb8784fe8996ca669de00b77b5d3dbe0296ddb2a8f0bba13e290ff46b349d73411
+  languageName: node
+  linkType: hard
+
+"@zhead/schema-vue@npm:^0.8.5":
+  version: 0.8.5
+  resolution: "@zhead/schema-vue@npm:0.8.5"
   dependencies:
     "@vueuse/shared": ^9.2.0
-    "@zhead/schema": 0.7.4
+    "@zhead/schema": 0.8.5
+    "@zhead/schema-raw": 0.8.5
   peerDependencies:
     vue: ">=2.7 || >=3"
-  checksum: 96487c101c7587ad7fa2c9e3f089cc38eb349e9e8464c243e9c06742ed699e6ca7fc8eb966a06440fc7ad544ae232503569de692ec4d94a8fee64ef5a47b6d1d
+  checksum: 162e8f984ddfd47efc0118441c9656d77d2626a3a90562c2481665c1210f6df2c8e42b8d576914a566156f35ea0599b798c7f6452f8ac380e2263f6a7c106adb
   languageName: node
   linkType: hard
 
-"@zhead/schema@npm:0.7.4":
-  version: 0.7.4
-  resolution: "@zhead/schema@npm:0.7.4"
-  checksum: a2e87971582b30fed4f5d69ef885a965cc2eb38d418cf78b6db4fb1d718c92148970375286d9f50115467d627ef73dbdb8effb8d5ee37065871eaa2060d4ceec
+"@zhead/schema@npm:0.8.5, @zhead/schema@npm:^0.8.5":
+  version: 0.8.5
+  resolution: "@zhead/schema@npm:0.8.5"
+  checksum: 9edb2c74e1e99607e982ad200c65c8c9d6acfe8557ac961d8defbb265abf822b93f6f44544ea01f3f7be9d6f6a48dae9e5745752ab83ed6a0555506a4af3223e
   languageName: node
   linkType: hard
 
@@ -10920,7 +10942,7 @@ __metadata:
     "@types/hash-sum": ^1.0.0
     "@vue/reactivity": ^3.2.40
     "@vue/shared": ^3.2.40
-    "@vueuse/head": ^0.7.12
+    "@vueuse/head": 1.0.0-rc.4
     chokidar: ^3.5.3
     cookie-es: ^0.5.0
     defu: ^6.1.0

From df84fcee331c81eefd6b3c10804bd2fd887bfb28 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 12 Oct 2022 03:49:31 +1100
Subject: [PATCH 13/28] chore: bump pkg

---
 packages/nuxt/package.json                    |  2 +-
 packages/nuxt/src/head/runtime/components.ts  |  4 ++--
 packages/nuxt/src/head/runtime/composables.ts | 10 ----------
 packages/schema/package.json                  |  2 +-
 test/basic.test.ts                            |  4 ++--
 yarn.lock                                     | 12 ++++++------
 6 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index 559954d737f..06963c70b87 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -44,7 +44,7 @@
     "@nuxt/vite-builder": "3.0.0-rc.11",
     "@vue/reactivity": "^3.2.40",
     "@vue/shared": "^3.2.40",
-    "@vueuse/head": "1.0.0-rc.4",
+    "@vueuse/head": "^1.0.0-rc.5",
     "chokidar": "^3.5.3",
     "cookie-es": "^0.5.0",
     "defu": "^6.1.0",
diff --git a/packages/nuxt/src/head/runtime/components.ts b/packages/nuxt/src/head/runtime/components.ts
index 027988e50dd..637660b4745 100644
--- a/packages/nuxt/src/head/runtime/components.ts
+++ b/packages/nuxt/src/head/runtime/components.ts
@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue'
 import type { PropType, SetupContext } from 'vue'
-import { useHeadRaw } from './composables'
+import { useHead } from './composables'
 import type {
   CrossOrigin,
   FetchPriority,
@@ -15,7 +15,7 @@ const removeUndefinedProps = (props: Props) =>
   Object.fromEntries(Object.entries(props).filter(([, value]) => value !== undefined))
 
 const setupForUseMeta = (metaFactory: (props: Props, ctx: SetupContext) => Record<string, any>, renderChild?: boolean) => (props: Props, ctx: SetupContext) => {
-  useHeadRaw(() => metaFactory({ ...removeUndefinedProps(props), ...ctx.attrs }, ctx))
+  useHead(() => metaFactory({ ...removeUndefinedProps(props), ...ctx.attrs }, ctx))
   return () => renderChild ? ctx.slots.default?.() : null
 }
 
diff --git a/packages/nuxt/src/head/runtime/composables.ts b/packages/nuxt/src/head/runtime/composables.ts
index 7df02300abe..170d5ffe322 100644
--- a/packages/nuxt/src/head/runtime/composables.ts
+++ b/packages/nuxt/src/head/runtime/composables.ts
@@ -1,6 +1,5 @@
 import type { MetaObject } from '@nuxt/schema'
 import { MaybeComputedRef } from '@vueuse/shared'
-import type { UseHeadRawInput } from '@vueuse/head'
 import { useNuxtApp } from '#app'
 
 /**
@@ -14,15 +13,6 @@ export function useHead (meta: MaybeComputedRef<MetaObject>) {
   useNuxtApp()._useHead(meta)
 }
 
-/**
- * Same as `useHead` but will render meta tags without encoding.
- *
- * Warning: This function opens you up to XSS attacks. Only use this if you trust the source of the meta tag data.
- */
-export function useHeadRaw (meta: UseHeadRawInput) {
-  useNuxtApp()._useHead(meta, { raw: true })
-}
-
 // TODO: remove useMeta support when Nuxt 3 is stable
 /** @deprecated Please use new `useHead` composable instead */
 export function useMeta (meta: MaybeComputedRef<MetaObject>) {
diff --git a/packages/schema/package.json b/packages/schema/package.json
index 8e2e74d0faa..e16e359ff85 100644
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@@ -21,7 +21,7 @@
     "vite": "~3.1.7"
   },
   "dependencies": {
-    "@vueuse/head": "1.0.0-rc.4",
+    "@vueuse/head": "^1.0.0-rc.5",
     "c12": "^0.2.13",
     "create-require": "^1.1.1",
     "defu": "^6.1.0",
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 93409d29795..8017248ac4a 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -235,8 +235,8 @@ describe('head tags', () => {
     expect(headHtml).toContain('<meta name="description" content="overriding with an inline useHead call">')
     expect(headHtml).toMatch(/<html[^>]*class="html-attrs-test"/)
     expect(headHtml).toMatch(/<body[^>]*class="body-attrs-test"/)
-    expect(headHtml).toContain('console.log(&quot;works with useMeta too&quot;)')
-    expect(headHtml).toContain('<script src="https://a-body-appended-script.com" data-meta-body="true"></script></body>')
+    expect(headHtml).toContain('console.log("works with useMeta too")')
+    expect(headHtml).toContain('<script src="https://a-body-appended-script.com" data-meta-body></script></body>')
 
     const indexHtml = await $fetch('/')
     // should render charset by default
diff --git a/yarn.lock b/yarn.lock
index 26520542a28..06e917781ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1835,7 +1835,7 @@ __metadata:
     "@types/lodash.template": ^4
     "@types/semver": ^7
     "@vitejs/plugin-vue": ^3.1.2
-    "@vueuse/head": 1.0.0-rc.4
+    "@vueuse/head": ^1.0.0-rc.5
     c12: ^0.2.13
     create-require: ^1.1.1
     defu: ^6.1.0
@@ -3461,16 +3461,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vueuse/head@npm:1.0.0-rc.4":
-  version: 1.0.0-rc.4
-  resolution: "@vueuse/head@npm:1.0.0-rc.4"
+"@vueuse/head@npm:^1.0.0-rc.5":
+  version: 1.0.0-rc.5
+  resolution: "@vueuse/head@npm:1.0.0-rc.5"
   dependencies:
     "@vueuse/shared": ^9.3.0
     "@zhead/schema": ^0.8.5
     "@zhead/schema-vue": ^0.8.5
   peerDependencies:
     vue: ">=2.7 || >=3"
-  checksum: debbdbc15a7d94b5a8ade227ba2e8e6b4fa9c562a0de68939f2e585adf2c9897d5420d314f69232090520fbb3f4d1c473381c2bed94de6dfacc0700ba5f87fae
+  checksum: 6169bd008c2bb74a73152a76e3329d13f64a86273c6514c7aaa04bfcfffce6e7f757c41eaa873253ead1d8dfd8efd4de7d598a1ed297df2d12c3393a57f669a5
   languageName: node
   linkType: hard
 
@@ -10942,7 +10942,7 @@ __metadata:
     "@types/hash-sum": ^1.0.0
     "@vue/reactivity": ^3.2.40
     "@vue/shared": ^3.2.40
-    "@vueuse/head": 1.0.0-rc.4
+    "@vueuse/head": ^1.0.0-rc.5
     chokidar: ^3.5.3
     cookie-es: ^0.5.0
     defu: ^6.1.0

From 9475bb3ddfbe6334a978f3033199c69f6e506627 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 12 Oct 2022 03:54:47 +1100
Subject: [PATCH 14/28] revert: test change

---
 test/basic.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/basic.test.ts b/test/basic.test.ts
index 8017248ac4a..a66d4a18542 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -235,7 +235,7 @@ describe('head tags', () => {
     expect(headHtml).toContain('<meta name="description" content="overriding with an inline useHead call">')
     expect(headHtml).toMatch(/<html[^>]*class="html-attrs-test"/)
     expect(headHtml).toMatch(/<body[^>]*class="body-attrs-test"/)
-    expect(headHtml).toContain('console.log("works with useMeta too")')
+    expect(headHtml).toContain('script>console.log("works with useMeta too")</script>')
     expect(headHtml).toContain('<script src="https://a-body-appended-script.com" data-meta-body></script></body>')
 
     const indexHtml = await $fetch('/')

From d0e0c3a16b142cafcb2224d4a18d9e4cb57b4c49 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 12 Oct 2022 12:46:29 +1100
Subject: [PATCH 15/28] chore: simplify shortcuts

---
 .../head/runtime/lib/vueuse-head.plugin.ts    | 33 +++----------------
 packages/nuxt/src/head/runtime/plugin.ts      |  8 ++---
 packages/schema/src/config/_app.ts            |  6 ++--
 packages/schema/src/types/config.ts           |  4 +--
 packages/schema/src/types/meta.ts             |  4 ++-
 5 files changed, 14 insertions(+), 41 deletions(-)

diff --git a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
index 86efc300eae..f1aca071f7a 100644
--- a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
+++ b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
@@ -1,8 +1,8 @@
-import type { HeadEntryOptions, HeadObjectApi } from '@vueuse/head'
+import type { HeadEntryOptions } from '@vueuse/head'
 import { createHead, renderHeadToString } from '@vueuse/head'
-import { onBeforeUnmount, getCurrentInstance, isRef } from 'vue'
+import { onBeforeUnmount, getCurrentInstance } from 'vue'
 import { MaybeComputedRef } from '@vueuse/shared'
-import type { MetaObject, MetaObjectPlain } from '@nuxt/schema'
+import type { MetaObject } from '@nuxt/schema'
 import { defineNuxtPlugin, useRouter } from '#app'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -30,31 +30,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     })
   }
 
-  nuxtApp._useHead = (_meta: MaybeComputedRef<MetaObject> | MetaObjectPlain, options: HeadEntryOptions) => {
-    const removeSideEffectFns: HeadObjectApi[] = []
-
-    // Handle shortcuts from plain meta only (avoids ref packing / unpacking)
-    if (!isRef(_meta) && typeof _meta === 'object') {
-      const plainMeta = _meta as MetaObjectPlain
-      const shortcutMeta = []
-      if (plainMeta.charset) {
-        shortcutMeta.push({
-          charset: plainMeta.charset
-        })
-      }
-      if (plainMeta.viewport) {
-        shortcutMeta.push({
-          name: 'viewport',
-          content: plainMeta.viewport
-        })
-      }
-      if (shortcutMeta.length) {
-        removeSideEffectFns.push(head.addEntry({
-          meta: shortcutMeta
-        }))
-      }
-    }
-
+  nuxtApp._useHead = (_meta: MaybeComputedRef<MetaObject>, options: HeadEntryOptions) => {
     if (process.server) {
       head.addEntry(_meta, options)
       return
@@ -67,7 +43,6 @@ export default defineNuxtPlugin((nuxtApp) => {
 
     onBeforeUnmount(() => {
       cleanUp()
-      removeSideEffectFns.forEach(fn => fn.remove())
       head.updateDOM()
     })
   }
diff --git a/packages/nuxt/src/head/runtime/plugin.ts b/packages/nuxt/src/head/runtime/plugin.ts
index c537bc20382..5ad5c81ef62 100644
--- a/packages/nuxt/src/head/runtime/plugin.ts
+++ b/packages/nuxt/src/head/runtime/plugin.ts
@@ -1,9 +1,7 @@
-import { computed, getCurrentInstance, markRaw } from 'vue'
+import { getCurrentInstance } from 'vue'
 import * as Components from './components'
 import { useHead } from './composables'
 import { defineNuxtPlugin, useNuxtApp } from '#app'
-// @ts-ignore
-import { appHead } from '#build/nuxt.config.mjs'
 
 type MetaComponents = typeof Components
 declare module '@vue/runtime-core' {
@@ -20,7 +18,7 @@ const metaMixin = {
 
     const nuxtApp = useNuxtApp()
     const source = typeof options.head === 'function'
-      ? computed(() => options.head(nuxtApp))
+      ? () => options.head(nuxtApp)
       : options.head
 
     useHead(source)
@@ -28,8 +26,6 @@ const metaMixin = {
 }
 
 export default defineNuxtPlugin((nuxtApp) => {
-  useHead(markRaw({ title: '', ...appHead }))
-
   nuxtApp.vueApp.mixin(metaMixin)
 
   for (const name in Components) {
diff --git a/packages/schema/src/config/_app.ts b/packages/schema/src/config/_app.ts
index a96ea97418a..4f9358cb488 100644
--- a/packages/schema/src/config/_app.ts
+++ b/packages/schema/src/config/_app.ts
@@ -2,7 +2,7 @@ import { resolve, join } from 'pathe'
 import { existsSync, readdirSync } from 'node:fs'
 import defu from 'defu'
 import { defineUntypedSchema } from 'untyped'
-import { MetaObjectPlain } from '../types/meta'
+import { AppHeadMetaObject } from '../types/meta'
 
 export default defineUntypedSchema({
   /**
@@ -115,7 +115,7 @@ export default defineUntypedSchema({
      */
     head: {
       $resolve: async (val, get) => {
-        const resolved: Required<MetaObjectPlain> = defu(val, await get('meta'), {
+        const resolved: Required<AppHeadMetaObject> = defu(val, await get('meta'), {
           meta: [],
           link: [],
           style: [],
@@ -236,7 +236,7 @@ export default defineUntypedSchema({
   },
 
   /**
-   * @type {typeof import('../src/types/meta').MetaObjectPlain}
+   * @type {typeof import('../src/types/meta').AppHeadMetaObject}
    * @version 3
    * @deprecated - use `head` instead
    */
diff --git a/packages/schema/src/types/config.ts b/packages/schema/src/types/config.ts
index c356c59394d..97f7e02581c 100644
--- a/packages/schema/src/types/config.ts
+++ b/packages/schema/src/types/config.ts
@@ -2,7 +2,7 @@ import type { KeepAliveProps, TransitionProps } from 'vue'
 import { ConfigSchema } from '../../schema/config'
 import type { ServerOptions as ViteServerOptions, UserConfig as ViteUserConfig } from 'vite'
 import type { Options as VuePluginOptions } from '@vitejs/plugin-vue'
-import type { MetaObjectPlain } from './meta'
+import type { AppHeadMetaObject } from './meta'
 import type { Nuxt } from './nuxt'
 
 type DeepPartial<T> = T extends Function ? T : T extends Record<string, any> ? { [P in keyof T]?: DeepPartial<T[P]> } : T
@@ -82,7 +82,7 @@ export interface AppConfigInput extends Record<string, any> {
 }
 
 export interface NuxtAppConfig {
-  head: MetaObjectPlain
+  head: AppHeadMetaObject
   layoutTransition: boolean | TransitionProps
   pageTransition: boolean | TransitionProps
   keepalive: boolean | KeepAliveProps
diff --git a/packages/schema/src/types/meta.ts b/packages/schema/src/types/meta.ts
index af0924f447c..423d405a362 100644
--- a/packages/schema/src/types/meta.ts
+++ b/packages/schema/src/types/meta.ts
@@ -12,7 +12,9 @@ export interface HeadAugmentations {
   bodyAttrs?: {};
 }
 
-export type MetaObjectPlain = HeadObjectPlain<HeadAugmentations> & {
+export type MetaObjectRaw = HeadObjectPlain<HeadAugmentations>
+
+export type AppHeadMetaObject = MetaObjectRaw & {
   /**
    * The character encoding in which the document is encoded => `<meta charset="<value>" />`
    *

From 20e96ec45978a3378de5efbed011ae7cd88c1bff Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 12 Oct 2022 13:47:29 +1100
Subject: [PATCH 16/28] chore: simplify the initial meta even further

---
 .../nuxt/src/head/runtime/lib/vue-meta.plugin.ts    |  3 +++
 .../nuxt/src/head/runtime/lib/vueuse-head.plugin.ts |  4 ++++
 packages/schema/src/config/_app.ts                  | 13 ++++++++++---
 test/fixtures/basic/pages/head.vue                  |  3 ++-
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/nuxt/src/head/runtime/lib/vue-meta.plugin.ts b/packages/nuxt/src/head/runtime/lib/vue-meta.plugin.ts
index 9569534d954..ecdc4d689ae 100644
--- a/packages/nuxt/src/head/runtime/lib/vue-meta.plugin.ts
+++ b/packages/nuxt/src/head/runtime/lib/vue-meta.plugin.ts
@@ -2,10 +2,13 @@ import { createApp } from 'vue'
 import { createMetaManager } from 'vue-meta'
 import type { MetaObject } from '..'
 import { defineNuxtPlugin } from '#app'
+// @ts-expect-error untyped
+import { appHead } from '#build/nuxt.config.mjs'
 
 export default defineNuxtPlugin((nuxtApp) => {
   // @ts-expect-error missing resolver
   const manager = createMetaManager(process.server)
+  manager.addMeta(appHead)
 
   nuxtApp.vueApp.use(manager)
 
diff --git a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
index f1aca071f7a..03e1d048720 100644
--- a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
+++ b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
@@ -4,10 +4,14 @@ import { onBeforeUnmount, getCurrentInstance } from 'vue'
 import { MaybeComputedRef } from '@vueuse/shared'
 import type { MetaObject } from '@nuxt/schema'
 import { defineNuxtPlugin, useRouter } from '#app'
+// @ts-expect-error untyped
+import { appHead } from '#build/nuxt.config.mjs'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const head = createHead()
 
+  head.addEntry(appHead, { resolved: true })
+
   nuxtApp.vueApp.use(head)
 
   if (process.client) {
diff --git a/packages/schema/src/config/_app.ts b/packages/schema/src/config/_app.ts
index 4f9358cb488..4f4fad39395 100644
--- a/packages/schema/src/config/_app.ts
+++ b/packages/schema/src/config/_app.ts
@@ -116,6 +116,7 @@ export default defineUntypedSchema({
     head: {
       $resolve: async (val, get) => {
         const resolved: Required<AppHeadMetaObject> = defu(val, await get('meta'), {
+          title: '',
           meta: [],
           link: [],
           style: [],
@@ -123,9 +124,15 @@ export default defineUntypedSchema({
           noscript: []
         })
 
-        resolved.charset = resolved.charset ?? resolved.meta.find(m => m.charset)?.charset ?? 'utf-8'
-        resolved.viewport = resolved.viewport ?? resolved.meta.find(m => m.name === 'viewport')?.content ?? 'width=device-width, initial-scale=1'
-        resolved.meta = resolved.meta.filter(m => m && m.name !== 'viewport' && !m.charset)
+        // provides default charset and viewport if not set
+        if (!resolved.meta.find(m => m.charset)?.charset) {
+          resolved.meta.unshift({ charset: resolved.charset || 'utf-8' })
+        }
+        if (!resolved.meta.find(m => m.name === 'viewport')?.content) {
+          resolved.meta.unshift({ name: 'viewport', content: resolved.viewport || 'width=device-width, initial-scale=1' })
+        }
+
+        resolved.meta = resolved.meta.filter(Boolean)
         resolved.link = resolved.link.filter(Boolean)
         resolved.style = resolved.style.filter(Boolean)
         resolved.script = resolved.script.filter(Boolean)
diff --git a/test/fixtures/basic/pages/head.vue b/test/fixtures/basic/pages/head.vue
index 3221ba9effe..ee3328b8a3f 100644
--- a/test/fixtures/basic/pages/head.vue
+++ b/test/fixtures/basic/pages/head.vue
@@ -1,5 +1,6 @@
 <script setup>
 const a = ref('')
+
 useHead({
   // title template function example
   titleTemplate: title => `${title} - Title Template Fn Change`,
@@ -14,7 +15,7 @@ useHead({
   ],
   meta: [{ name: 'description', content: 'first' }]
 })
-useHead({ charset: 'utf-16', meta: [{ name: 'description', content: computed(() => `${a.value} with an inline useHead call`) }] })
+useHead({ meta: [{ charset: 'utf-16' }, { name: 'description', content: computed(() => `${a.value} with an inline useHead call`) }] })
 useMeta({ script: [{ children: 'console.log("works with useMeta too")' }] })
 a.value = 'overriding'
 </script>

From fb20fbfca383a64188de163fcb4dbbc6c293114d Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 12 Oct 2022 15:52:00 +1100
Subject: [PATCH 17/28] doc: improve seo / useHead doc

---
 docs/content/1.getting-started/5.seo-meta.md  | 126 ++++++++++-------
 docs/content/3.api/1.composables/use-head.md  | 133 +++++++++---------
 .../4.examples/3.composables/use-head.md      |   4 -
 3 files changed, 144 insertions(+), 119 deletions(-)

diff --git a/docs/content/1.getting-started/5.seo-meta.md b/docs/content/1.getting-started/5.seo-meta.md
index 6b4ab49e328..3256623bbd5 100644
--- a/docs/content/1.getting-started/5.seo-meta.md
+++ b/docs/content/1.getting-started/5.seo-meta.md
@@ -1,34 +1,64 @@
 ---
 navigation.icon: uil:file-search-alt
-description: Nuxt provides good default values for meta tags, but you can override these if you need to.
+description: Improve your Nuxt apps SEO with powerful SEO composables and components.
 ---
 
 # SEO and Meta
 
-Out-of-the-box, Nuxt provides good default values for `charset` and `viewport` meta tags, but you can override these if you need to, as well as customize other meta tags for your site in several different ways.
+Improve your Nuxt apps SEO with powerful SEO composables and components.
 
-:ReadMore{link="/api/configuration/nuxt-config#head"}
+:ReadMore{link="/api/configuration/nuxt-config/#head"}
+
+## App Head
+
+Providing an [app.head](/api/configuration/nuxt-config#head) property in your `nuxt.config.ts` allows you to customize the head for your entire app.
+
+### Defaults
+
+Out-of-the-box, Nuxt provides sane defaults, which you can override if needed.
+
+- `charset`: `utf-8`
+- `viewport`: `width=device-width, initial-scale=1`
+
+### Example
+
+Note: When defining your app head, you are unable to provide reactive data, for this you should use `useHead`.
+
+```ts{}[nuxt.config.ts]
+export default defineNuxtConfig({
+  app: {
+    head: {
+      title: 'My App',
+      // <meta charset="utf-16">
+      charset: 'utf-16',
+      meta: [
+        // <meta name="description" content="My amazing site">
+        { name: 'description', content: 'My amazing site.' }
+      ],
+    }
+  }
+})
+```
 
 ## `useHead` Composable
 
-Within your `setup` function, you can call `useHead` with an object of meta properties with keys corresponding to meta tags: `title`, `titleTemplate`, `base`, `script`, `noscript`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. There are also two shorthand properties, `charset` and `viewport`, which set the corresponding meta tags. Alternatively, you can pass a function returning the object for reactive metadata.
+The `useHead` composable function allows you to manage your head tags in a programmatic and reactive way, powered by [@vueuse/head](https://github.com/vueuse/head).
 
-For example:
+As with all composables, it can only be used with a components `setup` and lifecycle hooks.
 
-```vue
-<script setup>
+### Example
+
+```vue{}[app.vue]
+<script setup lang="ts">
 useHead({
   title: 'My App',
-  // or, instead:
-  // titleTemplate: (title) => `My App - ${title}`,
-  viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
-  charset: 'utf-8',
   meta: [
     { name: 'description', content: 'My amazing site.' }
   ],
   bodyAttrs: {
     class: 'test'
-  }
+  },
+  script: [ { children: 'console.log(\'Hello world\') } ]
 })
 </script>
 ```
@@ -36,14 +66,36 @@ useHead({
 ::ReadMore{link="/api/composables/use-head"}
 ::
 
-## Title Templates
+### Reactivity
+
+
+Reactivity is supported on all properties, as computed, computed getter refs and reactive.
+
+It's recommended to use computed getters (`() => {}`) over computed (`computed(() => {})`).
+
+```vue{}[app.vue]
+<script setup lang="ts">
+const desc = ref('My amazing site.')
 
-You can use the `titleTemplate` option to provide a dynamic template for customizing the title of your site, for example, by adding the name of your site to the title of every page.
+useHead({
+  title: () => `Blog: ${useRoute().meta.title}`,
+  meta: [
+    { name: 'description', content: desc }
+  ],
+})
+</script>
+```
 
-The `titleTemplate` can either be a string, where `%s` is replaced with the title, or a function. If you want to use a function (for full control), then this cannot be set in your `nuxt.config`, and it is recommended instead to set it within your `app.vue` file, where it will apply to all pages on your site:
+### Title Templates
+
+You can use the `titleTemplate` option to provide a dynamic template for customizing the title of your site. for example, by adding the name of your site to the title of every page.
+
+The `titleTemplate` can either be a string, where `%s` is replaced with the title, or a function. 
+
+If you want to use a function (for full control), then this cannot be set in your `nuxt.config`, and it is recommended instead to set it within your `app.vue` file, where it will apply to all pages on your site:
 
 ```vue [app.vue]
-<script setup>
+<script setup lang="ts">
   useHead({
     titleTemplate: (titleChunk) => {
       return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
@@ -54,14 +106,14 @@ The `titleTemplate` can either be a string, where `%s` is replaced with the titl
 
 Now, if you set the title to `My Page` with `useHead` on another page of your site, the title would appear as 'My Page - Site Title' in the browser tab. You could also pass `null` to default to the site title.
 
-## Body Meta Tags
+### Body Meta Tags
 
 You can use the `body: true` option on the `link` and `script` meta tags to append them to the end of the `<body>` tag.
 
 For example:
 
-```vue
-<script setup>
+```vue{}[app.vue]
+<script setup lang="ts">
 useHead({
   script: [
     {
@@ -73,7 +125,12 @@ useHead({
 </script>
 ```
 
-## Meta Components
+### Learn More
+
+::ReadMore{link="/api/composables/use-head"}
+::
+
+## Head Components
 
 Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<NoScript>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template.
 
@@ -103,32 +160,3 @@ const title = ref('Hello World')
 </template>
 ```
 
-## Example: Usage With `definePageMeta`
-
-Within your `pages/` directory, you can use `definePageMeta` along with `useHead` to set metadata based on the current route.
-
-For example, you can first set the current page title (this is extracted at build time via a macro, so it can't be set dynamically):
-
-```vue{}[pages/some-page.vue]
-<script setup>
-definePageMeta({
-  title: 'Some Page'
-})
-</script>
-```
-
-And then in your layout file, you might use the route's metadata you have previously set:
-
-```vue{}[layouts/default.vue]
-<script setup>
-const route = useRoute()
-
-useHead({
-  meta: [{ name: 'og:title', content: `App Name - ${route.meta.title}` }]
-})
-</script>
-```
-
-:LinkExample{link="/examples/composables/use-head"}
-
-:ReadMore{link="/guide/directory-structure/pages/#page-metadata"}
diff --git a/docs/content/3.api/1.composables/use-head.md b/docs/content/3.api/1.composables/use-head.md
index f34b26f0f9f..1ca326fb207 100644
--- a/docs/content/3.api/1.composables/use-head.md
+++ b/docs/content/3.api/1.composables/use-head.md
@@ -1,5 +1,5 @@
 ---
-description:  useHead customizes the head properties of individual pages of your Nuxt app.
+description: useHead customizes the head properties of individual pages of your Nuxt app.
 ---
 
 # `useHead`
@@ -10,23 +10,30 @@ Nuxt provides the `useHead` composable to add and customize the head properties
 `useHead` only works during `setup` or `Lifecycle Hooks`.
 ::
 
+::ReadMore{link="/getting-started/seo-meta"}
+::
+
+
 ## Type
 
 ```ts
-useHead(meta: Computable<MetaObject>): void
-
-interface 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)
+useHead(meta: MaybeComputedRef<MetaObject>): void
+```
+
+See [zhead](https://github.com/harlan-zw/zhead/tree/main/packages/schema/src) for more detailed types.
+
+```ts
+interface MetaObject {
   title?: string
-  bodyAttrs?: Record<string, any>
-  htmlAttrs?: Record<string, any>
+  titleTemplate?: string | ((title?: string) => string)
+  base?: Base
+  link?: Link[]
+  meta?: Meta[]
+  style?: Style[]
+  script?: Script[]
+  noscript?: Noscript[];
+  htmlAttrs?: HtmlAttributes;
+  bodyAttrs?: BodyAttributes;
 }
 ```
 
@@ -44,28 +51,10 @@ The properties of `useHead` can be dynamic, accepting `ref`, `computed` and `rea
 
 An object accepting the following head metadata:
 
-- `charset`
-
-  **Type**: `string`
-
-  **Default**: `utf-8`
-
-  Specifies character encoding for the HTML document.
-
-- `viewport`
-
-  **Type**: `string`
-
-  **Default**: `width=device-width, initial-scale=1`
-
-  Configures the viewport (the user's visible area of a web page).
-
 - `meta`
 
   **Type**: `Array<Record<string, any>>`
 
-  **Default**: `width=device-width, initial-scale=1`
-
   Each element in the array is mapped to a newly-created `<meta>` tag, where object properties are mapped to the corresponding attributes.
 
 - `link`
@@ -118,27 +107,37 @@ An object accepting the following head metadata:
 
 ## Examples
 
-### Customize Metadata
+### Usage With `definePageMeta`
 
-The example below changes the website's `title` and `description` using `meta` option of the `useHead` composable:
+Within your `pages/` directory, you can use `definePageMeta` along with `useHead` to set metadata based on the current route.
 
-```vue
+For example, you can first set the current page title (this is extracted at build time via a macro, so it can't be set dynamically):
+
+```vue{}[pages/some-page.vue]
 <script setup>
-  const title = ref('My App')
-  const description = ref('My amazing Nuxt app')
+definePageMeta({
+  title: 'Some Page'
+})
+</script>
+```
 
-  useHead({
-    title,
-    meta: [
-      {
-        name: 'description',
-        content: description
-      }
-    ]
-  })
+And then in your layout file, you might use the route's metadata you have previously set:
+
+```vue{}[layouts/default.vue]
+<script setup>
+const route = useRoute()
+
+useHead({
+  meta: [{ name: 'og:title', content: `App Name - ${route.meta.title}` }]
+})
 </script>
 ```
 
+:LinkExample{link="/examples/composables/use-head"}
+
+:ReadMore{link="/guide/directory-structure/pages/#page-metadata"}
+
+
 ### Add Dynamic Title
 
 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:
@@ -161,6 +160,28 @@ In the example below, `titleTemplate` is set either as a string with the `%s` pl
 
 `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.
 
+
+### Add Third-party Scripts
+
+The example below inserts a third-party script using the `script` property of the `useHead` composable:
+
+```vue
+<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.
+
+:ReadMore{link="/guide/features/head-management"}
+
 ### Add External CSS
 
 The example below inserts Google Fonts using the `link` property of the `useHead` composable:
@@ -183,23 +204,3 @@ The example below inserts Google Fonts using the `link` property of the `useHead
 </script>
 ```
 
-### Add Third-party Script
-
-The example below inserts a third-party script using the `script` property of the `useHead` composable:
-
-```vue
-<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.
-
-:ReadMore{link="/guide/features/head-management"}
diff --git a/docs/content/4.examples/3.composables/use-head.md b/docs/content/4.examples/3.composables/use-head.md
index 529eabc4cd3..6251ed68ca9 100644
--- a/docs/content/4.examples/3.composables/use-head.md
+++ b/docs/content/4.examples/3.composables/use-head.md
@@ -4,10 +4,6 @@ description: "This example shows how to use useHead and Nuxt built-in components
 title: "useHead"
 ---
 
-::alert{type=info icon=👉}
-Learn more about [meta tags](/guide/features/head-management#meta-components).
-::
-
 ::ReadMore{link="/api/composables/use-head"}
 ::
 

From c8f7c11109795fa155e4c8db58f646275ba80dd2 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 12 Oct 2022 17:00:35 +1100
Subject: [PATCH 18/28] doc: polish and lint

---
 docs/content/1.getting-started/5.seo-meta.md | 24 ++++++++------------
 docs/content/3.api/1.composables/use-head.md |  4 ----
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/docs/content/1.getting-started/5.seo-meta.md b/docs/content/1.getting-started/5.seo-meta.md
index 3256623bbd5..93d6dde638d 100644
--- a/docs/content/1.getting-started/5.seo-meta.md
+++ b/docs/content/1.getting-started/5.seo-meta.md
@@ -1,18 +1,18 @@
 ---
 navigation.icon: uil:file-search-alt
-description: Improve your Nuxt apps SEO with powerful SEO composables and components.
+description: Improve your Nuxt apps SEO with powerful head config, composables and components.
 ---
 
 # SEO and Meta
 
-Improve your Nuxt apps SEO with powerful SEO composables and components.
-
-:ReadMore{link="/api/configuration/nuxt-config/#head"}
+Improve your Nuxt apps SEO with powerful head config, composables and components.
 
 ## App Head
 
 Providing an [app.head](/api/configuration/nuxt-config#head) property in your `nuxt.config.ts` allows you to customize the head for your entire app.
 
+This method does not allow you to provide reactive data, if you need global reactive data you can use `useHead` in `app.vue`.
+
 ### Defaults
 
 Out-of-the-box, Nuxt provides sane defaults, which you can override if needed.
@@ -22,8 +22,6 @@ Out-of-the-box, Nuxt provides sane defaults, which you can override if needed.
 
 ### Example
 
-Note: When defining your app head, you are unable to provide reactive data, for this you should use `useHead`.
-
 ```ts{}[nuxt.config.ts]
 export default defineNuxtConfig({
   app: {
@@ -40,7 +38,9 @@ export default defineNuxtConfig({
 })
 ```
 
-## `useHead` Composable
+:ReadMore{link="/api/configuration/nuxt-config/#head"}
+
+## Composable: `useHead`
 
 The `useHead` composable function allows you to manage your head tags in a programmatic and reactive way, powered by [@vueuse/head](https://github.com/vueuse/head).
 
@@ -68,7 +68,6 @@ useHead({
 
 ### Reactivity
 
-
 Reactivity is supported on all properties, as computed, computed getter refs and reactive.
 
 It's recommended to use computed getters (`() => {}`) over computed (`computed(() => {})`).
@@ -90,7 +89,7 @@ useHead({
 
 You can use the `titleTemplate` option to provide a dynamic template for customizing the title of your site. for example, by adding the name of your site to the title of every page.
 
-The `titleTemplate` can either be a string, where `%s` is replaced with the title, or a function. 
+The `titleTemplate` can either be a string, where `%s` is replaced with the title, or a function.
 
 If you want to use a function (for full control), then this cannot be set in your `nuxt.config`, and it is recommended instead to set it within your `app.vue` file, where it will apply to all pages on your site:
 
@@ -106,7 +105,7 @@ If you want to use a function (for full control), then this cannot be set in you
 
 Now, if you set the title to `My Page` with `useHead` on another page of your site, the title would appear as 'My Page - Site Title' in the browser tab. You could also pass `null` to default to the site title.
 
-### Body Meta Tags
+### Body Tags
 
 You can use the `body: true` option on the `link` and `script` meta tags to append them to the end of the `<body>` tag.
 
@@ -125,12 +124,10 @@ useHead({
 </script>
 ```
 
-### Learn More
-
 ::ReadMore{link="/api/composables/use-head"}
 ::
 
-## Head Components
+## Components
 
 Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<NoScript>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template.
 
@@ -159,4 +156,3 @@ const title = ref('Hello World')
   </div>
 </template>
 ```
-
diff --git a/docs/content/3.api/1.composables/use-head.md b/docs/content/3.api/1.composables/use-head.md
index 1ca326fb207..5129b4b6c3a 100644
--- a/docs/content/3.api/1.composables/use-head.md
+++ b/docs/content/3.api/1.composables/use-head.md
@@ -13,7 +13,6 @@ Nuxt provides the `useHead` composable to add and customize the head properties
 ::ReadMore{link="/getting-started/seo-meta"}
 ::
 
-
 ## Type
 
 ```ts
@@ -137,7 +136,6 @@ useHead({
 
 :ReadMore{link="/guide/directory-structure/pages/#page-metadata"}
 
-
 ### Add Dynamic Title
 
 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:
@@ -160,7 +158,6 @@ In the example below, `titleTemplate` is set either as a string with the `%s` pl
 
 `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.
 
-
 ### Add Third-party Scripts
 
 The example below inserts a third-party script using the `script` property of the `useHead` composable:
@@ -203,4 +200,3 @@ The example below inserts Google Fonts using the `link` property of the `useHead
   })
 </script>
 ```
-

From 6389ce40c5158474a0b23a544dda1b8c3a5a8f43 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 12 Oct 2022 17:39:49 +1100
Subject: [PATCH 19/28] doc: polish and lint

---
 docs/content/1.getting-started/5.seo-meta.md | 245 +++++++++++++++----
 docs/content/3.api/1.composables/use-head.md | 101 +-------
 2 files changed, 195 insertions(+), 151 deletions(-)

diff --git a/docs/content/1.getting-started/5.seo-meta.md b/docs/content/1.getting-started/5.seo-meta.md
index 93d6dde638d..b16319a6657 100644
--- a/docs/content/1.getting-started/5.seo-meta.md
+++ b/docs/content/1.getting-started/5.seo-meta.md
@@ -11,7 +11,11 @@ Improve your Nuxt apps SEO with powerful head config, composables and components
 
 Providing an [app.head](/api/configuration/nuxt-config#head) property in your `nuxt.config.ts` allows you to customize the head for your entire app.
 
+::alert{type=info}
 This method does not allow you to provide reactive data, if you need global reactive data you can use `useHead` in `app.vue`.
+::
+
+Shortcuts are available to make configuration easier: `charset` and `viewport`. Otherwise refer to the [Types](#types).
 
 ### Defaults
 
@@ -26,9 +30,9 @@ Out-of-the-box, Nuxt provides sane defaults, which you can override if needed.
 export default defineNuxtConfig({
   app: {
     head: {
-      title: 'My App',
-      // <meta charset="utf-16">
       charset: 'utf-16',
+      viewport: 'width=500, initial-scale=1', 
+      title: 'My App',
       meta: [
         // <meta name="description" content="My amazing site">
         { name: 'description', content: 'My amazing site.' }
@@ -66,24 +70,91 @@ useHead({
 ::ReadMore{link="/api/composables/use-head"}
 ::
 
+## Components
+
+Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<NoScript>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template.
+
+Because these component names match native HTML elements, it is very important that they are capitalized in the template.
+
+`<Head>` and `<Body>` can accept nested meta tags (for aesthetic reasons) but this has no effect on _where_ the nested meta tags are rendered in the final HTML.
+
+### Example
+
+<!-- @case-police-ignore html -->
+
+```vue{}[app.vue]
+<script setup>
+const title = ref('Hello World')
+</script>
+
+<template>
+  <div>
+    <Head>
+      <Title>{{ title }}</Title>
+      <Meta name="description" :content="title" />
+      <Style type="text/css" children="body { background-color: green; }" />
+    </Head>
+
+    <h1>{{ title }}</h1>
+  </div>
+</template>
+```
+
+## Types
+
+The below is the non-reactive types used for `useHead`, `app.head` and components.
+
+```ts
+interface MetaObject {
+  title?: string
+  titleTemplate?: string | ((title?: string) => string)
+  base?: Base
+  link?: Link[]
+  meta?: Meta[]
+  style?: Style[]
+  script?: Script[]
+  noscript?: Noscript[];
+  htmlAttrs?: HtmlAttributes;
+  bodyAttrs?: BodyAttributes;
+}
+```
+
+See [zhead](https://github.com/harlan-zw/zhead/tree/main/packages/schema/src) for more detailed types.
+
+## Features
+
 ### Reactivity
 
 Reactivity is supported on all properties, as computed, computed getter refs and reactive.
 
 It's recommended to use computed getters (`() => {}`) over computed (`computed(() => {})`).
 
-```vue{}[app.vue]
-<script setup lang="ts">
-const desc = ref('My amazing site.')
+::code-group
 
-useHead({
-  title: () => `Blog: ${useRoute().meta.title}`,
-  meta: [
-    { name: 'description', content: desc }
-  ],
-})
-</script>
-```
+  ```vue [useHead]
+  <script setup lang="ts">
+  const desc = ref('My amazing site.')
+  
+  useHead({
+    meta: [
+      { name: 'description', content: desc }
+    ],
+  })
+  </script>
+  ```
+
+  ```vue [Components]
+  <script setup>
+  const desc = ref('My amazing site.')
+  </script>
+  <template>
+  <div>
+    <Meta name="description" :content="desc" />
+  </div>
+  </template>
+  ```
+
+::
 
 ### Title Templates
 
@@ -93,15 +164,19 @@ The `titleTemplate` can either be a string, where `%s` is replaced with the titl
 
 If you want to use a function (for full control), then this cannot be set in your `nuxt.config`, and it is recommended instead to set it within your `app.vue` file, where it will apply to all pages on your site:
 
-```vue [app.vue]
-<script setup lang="ts">
-  useHead({
-    titleTemplate: (titleChunk) => {
-      return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
-    }
-  })
-</script>
-```
+::code-group
+
+  ```vue [useHead]
+  <script setup lang="ts">
+    useHead({
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
+      }
+    })
+  </script>
+  ```
+
+::
 
 Now, if you set the title to `My Page` with `useHead` on another page of your site, the title would appear as 'My Page - Site Title' in the browser tab. You could also pass `null` to default to the site title.
 
@@ -111,48 +186,116 @@ You can use the `body: true` option on the `link` and `script` meta tags to appe
 
 For example:
 
-```vue{}[app.vue]
-<script setup lang="ts">
-useHead({
-  script: [
-    {
-      src: 'https://third-party-script.com',
-      body: true
-    }
-  ]
+::code-group
+
+  ```vue [useHead]
+  <script setup lang="ts">
+  useHead({
+    script: [
+      {
+        src: 'https://third-party-script.com',
+        body: true
+      }
+    ]
+  })
+  </script>
+  ```
+
+  ```vue [Components]
+  <template>
+  <div>
+    <Script src="https://third-party-script.com" body="true" />
+  </div>
+  </template>
+  ```
+
+::
+
+## Examples
+
+### Usage With `definePageMeta`
+
+Within your `pages/` directory, you can use `definePageMeta` along with `useHead` to set metadata based on the current route.
+
+For example, you can first set the current page title (this is extracted at build time via a macro, so it can't be set dynamically):
+
+```vue{}[pages/some-page.vue]
+<script setup>
+definePageMeta({
+  title: 'Some Page'
 })
 </script>
 ```
 
-::ReadMore{link="/api/composables/use-head"}
-::
+And then in your layout file, you might use the route's metadata you have previously set:
 
-## Components
+```vue{}[layouts/default.vue]
+<script setup>
+const route = useRoute()
 
-Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<NoScript>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template.
+useHead({
+  meta: [{ name: 'og:title', content: `App Name - ${route.meta.title}` }]
+})
+</script>
+```
 
-Because these component names match native HTML elements, it is very important that they are capitalized in the template.
+:LinkExample{link="/examples/composables/use-head"}
 
-`<Head>` and `<Body>` can accept nested meta tags (for aesthetic reasons) but this has no effect on _where_ the nested meta tags are rendered in the final HTML.
+:ReadMore{link="/guide/directory-structure/pages/#page-metadata"}
 
-For example:
+### Add Dynamic Title
 
-<!-- @case-police-ignore html -->
+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:
 
-```vue{}[app.vue]
+```vue [app.vue]
 <script setup>
-const title = ref('Hello World')
+  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>
+```
 
-<template>
-  <div>
-    <Head>
-      <Title>{{ title }}</Title>
-      <Meta name="description" :content="title" />
-      <Style type="text/css" children="body { background-color: green; }" />
-    </Head>
+`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.
 
-    <h1>{{ title }}</h1>
+### Add External CSS
+
+The example below inserts Google Fonts using the `link` property of the `useHead` composable:
+
+::code-group
+
+  ```vue [useHead]
+  <script setup lang="ts">  
+  useHead({
+    link: [
+      { 
+        rel: 'preconnect', 
+        href: 'https://fonts.googleapis.com'
+      },
+      { 
+        rel: 'stylesheet', 
+        href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', 
+        crossorigin: '' 
+      }
+    ]
+  })
+  </script>
+  ```
+
+  ```vue [Components]
+  <template>
+  <div>
+    <Link rel="preconnect" href="https://fonts.googleapis.com" />
+    <Link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" crossorigin="" />
   </div>
-</template>
-```
+  </template>
+  ```
+
+::
diff --git a/docs/content/3.api/1.composables/use-head.md b/docs/content/3.api/1.composables/use-head.md
index 5129b4b6c3a..13a045b87dd 100644
--- a/docs/content/3.api/1.composables/use-head.md
+++ b/docs/content/3.api/1.composables/use-head.md
@@ -19,7 +19,7 @@ Nuxt provides the `useHead` composable to add and customize the head properties
 useHead(meta: MaybeComputedRef<MetaObject>): void
 ```
 
-See [zhead](https://github.com/harlan-zw/zhead/tree/main/packages/schema/src) for more detailed types.
+The below is the non-reactive types for `useMeta`. See [zhead](https://github.com/harlan-zw/zhead/tree/main/packages/schema/src) for more detailed types.
 
 ```ts
 interface MetaObject {
@@ -36,8 +36,6 @@ interface MetaObject {
 }
 ```
 
-Application-wide configuration of the head metadata is possible through [nuxt.config](/api/configuration/nuxt-config#head), or by placing the `useHead` in the `app.vue` file.
-
 ::alert{type=info}
 The properties of `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.
 ::
@@ -103,100 +101,3 @@ An object accepting the following head metadata:
   **Type**: `Record<string, any>`
 
   Sets attributes of the `<html>` tag. Each object property is mapped to the corresponding attribute.
-
-## Examples
-
-### Usage With `definePageMeta`
-
-Within your `pages/` directory, you can use `definePageMeta` along with `useHead` to set metadata based on the current route.
-
-For example, you can first set the current page title (this is extracted at build time via a macro, so it can't be set dynamically):
-
-```vue{}[pages/some-page.vue]
-<script setup>
-definePageMeta({
-  title: 'Some Page'
-})
-</script>
-```
-
-And then in your layout file, you might use the route's metadata you have previously set:
-
-```vue{}[layouts/default.vue]
-<script setup>
-const route = useRoute()
-
-useHead({
-  meta: [{ name: 'og:title', content: `App Name - ${route.meta.title}` }]
-})
-</script>
-```
-
-:LinkExample{link="/examples/composables/use-head"}
-
-:ReadMore{link="/guide/directory-structure/pages/#page-metadata"}
-
-### Add Dynamic Title
-
-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:
-
-```vue [app.vue]
-<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.
-
-### Add Third-party Scripts
-
-The example below inserts a third-party script using the `script` property of the `useHead` composable:
-
-```vue
-<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.
-
-:ReadMore{link="/guide/features/head-management"}
-
-### Add External CSS
-
-The example below inserts Google Fonts using the `link` property of the `useHead` composable:
-
-```vue
-<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>
-```

From 4788b1de12025f24cd88a3c4f4d7753539ce2455 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 12 Oct 2022 18:16:04 +1100
Subject: [PATCH 20/28] chore: pr fixes

---
 packages/nuxt/package.json                    |  2 +-
 packages/nuxt/src/head/runtime/composables.ts |  2 +-
 packages/schema/package.json                  |  2 +-
 yarn.lock                                     | 12 ++++++------
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index 0e40acbe6ce..24018ff9392 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -44,7 +44,7 @@
     "@nuxt/vite-builder": "3.0.0-rc.11",
     "@vue/reactivity": "^3.2.40",
     "@vue/shared": "^3.2.40",
-    "@vueuse/head": "^1.0.0-rc.5",
+    "@vueuse/head": "1.0.0-rc.6",
     "chokidar": "^3.5.3",
     "cookie-es": "^0.5.0",
     "defu": "^6.1.0",
diff --git a/packages/nuxt/src/head/runtime/composables.ts b/packages/nuxt/src/head/runtime/composables.ts
index 170d5ffe322..d404b4f2f09 100644
--- a/packages/nuxt/src/head/runtime/composables.ts
+++ b/packages/nuxt/src/head/runtime/composables.ts
@@ -1,5 +1,5 @@
 import type { MetaObject } from '@nuxt/schema'
-import { MaybeComputedRef } from '@vueuse/shared'
+import type { MaybeComputedRef } from '@vueuse/head'
 import { useNuxtApp } from '#app'
 
 /**
diff --git a/packages/schema/package.json b/packages/schema/package.json
index e16e359ff85..18ff7439dae 100644
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@@ -21,7 +21,7 @@
     "vite": "~3.1.7"
   },
   "dependencies": {
-    "@vueuse/head": "^1.0.0-rc.5",
+    "@vueuse/head": "1.0.0-rc.6",
     "c12": "^0.2.13",
     "create-require": "^1.1.1",
     "defu": "^6.1.0",
diff --git a/yarn.lock b/yarn.lock
index 9504ac71de5..a0ae3bdccb2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1835,7 +1835,7 @@ __metadata:
     "@types/lodash.template": ^4
     "@types/semver": ^7
     "@vitejs/plugin-vue": ^3.1.2
-    "@vueuse/head": ^1.0.0-rc.5
+    "@vueuse/head": 1.0.0-rc.6
     c12: ^0.2.13
     create-require: ^1.1.1
     defu: ^6.1.0
@@ -3461,16 +3461,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vueuse/head@npm:^1.0.0-rc.5":
-  version: 1.0.0-rc.5
-  resolution: "@vueuse/head@npm:1.0.0-rc.5"
+"@vueuse/head@npm:1.0.0-rc.6":
+  version: 1.0.0-rc.6
+  resolution: "@vueuse/head@npm:1.0.0-rc.6"
   dependencies:
     "@vueuse/shared": ^9.3.0
     "@zhead/schema": ^0.8.5
     "@zhead/schema-vue": ^0.8.5
   peerDependencies:
     vue: ">=2.7 || >=3"
-  checksum: 6169bd008c2bb74a73152a76e3329d13f64a86273c6514c7aaa04bfcfffce6e7f757c41eaa873253ead1d8dfd8efd4de7d598a1ed297df2d12c3393a57f669a5
+  checksum: 37a473cbb919cb3f45912702db717910eb048a14357b235be73ed55d4093e80a359cdd775f5b5e26c3f8e499aa8df6cc57a420dfed76f27f2b9add6fd0df0cda
   languageName: node
   linkType: hard
 
@@ -10942,7 +10942,7 @@ __metadata:
     "@types/hash-sum": ^1.0.0
     "@vue/reactivity": ^3.2.40
     "@vue/shared": ^3.2.40
-    "@vueuse/head": ^1.0.0-rc.5
+    "@vueuse/head": 1.0.0-rc.6
     chokidar: ^3.5.3
     cookie-es: ^0.5.0
     defu: ^6.1.0

From 53d6656bec8420b4c21dbe6f1583903206a29929 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 12 Oct 2022 10:16:47 +0100
Subject: [PATCH 21/28] style: de-semify

---
 packages/schema/src/types/meta.ts | 36 +++++++++++++++----------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/schema/src/types/meta.ts b/packages/schema/src/types/meta.ts
index 423d405a362..d79bfe55b72 100644
--- a/packages/schema/src/types/meta.ts
+++ b/packages/schema/src/types/meta.ts
@@ -2,14 +2,14 @@ import type { HeadObjectPlain, HeadObject } from '@vueuse/head'
 
 export interface HeadAugmentations {
   // runtime type modifications
-  base?: {};
-  link?: {};
-  meta?: {};
-  style?: {};
-  script?: {};
-  noscript?: {};
-  htmlAttrs?: {};
-  bodyAttrs?: {};
+  base?: {}
+  link?: {}
+  meta?: {}
+  style?: {}
+  script?: {}
+  noscript?: {}
+  htmlAttrs?: {}
+  bodyAttrs?: {}
 }
 
 export type MetaObjectRaw = HeadObjectPlain<HeadAugmentations>
@@ -37,18 +37,18 @@ export interface MetaObject {
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title
    */
-  title?: HeadObject<HeadAugmentations>['title'];
+  title?: HeadObject<HeadAugmentations>['title']
   /**
    * Generate the title from a template.
    */
-  titleTemplate?: HeadObject<HeadAugmentations>['titleTemplate'];
+  titleTemplate?: HeadObject<HeadAugmentations>['titleTemplate']
   /**
    * The <base> HTML element specifies the base URL to use for all relative URLs in a document.
    * There can be only one <base> element in a document.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
    */
-  base?: HeadObject<HeadAugmentations>['base'];
+  base?: HeadObject<HeadAugmentations>['base']
   /**
    * The <link> HTML element specifies relationships between the current document and an external resource.
    * This element is most commonly used to link to stylesheets, but is also used to establish site icons
@@ -56,43 +56,43 @@ export interface MetaObject {
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-as
    */
-  link?: HeadObject<HeadAugmentations>['link'];
+  link?: HeadObject<HeadAugmentations>['link']
   /**
    * The <meta> element represents metadata that cannot be expressed in other HTML elements, like <link> or <script>.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
    */
-  meta?: HeadObject<HeadAugmentations>['meta'];
+  meta?: HeadObject<HeadAugmentations>['meta']
   /**
    * The <style> HTML element contains style information for a document, or part of a document.
    * It contains CSS, which is applied to the contents of the document containing the <style> element.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
    */
-  style?: HeadObject<HeadAugmentations>['style'];
+  style?: HeadObject<HeadAugmentations>['style']
   /**
    * The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
    */
-  script?: HeadObject<HeadAugmentations>['script'];
+  script?: HeadObject<HeadAugmentations>['script']
   /**
    * The <noscript> HTML element defines a section of HTML to be inserted if a script type on the page is unsupported
    * or if scripting is currently turned off in the browser.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
    */
-  noscript?: HeadObject<HeadAugmentations>['noscript'];
+  noscript?: HeadObject<HeadAugmentations>['noscript']
   /**
    * Attributes for the <html> HTML element.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html
    */
-  htmlAttrs?: HeadObject<HeadAugmentations>['htmlAttrs'];
+  htmlAttrs?: HeadObject<HeadAugmentations>['htmlAttrs']
   /**
    * Attributes for the <body> HTML element.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
    */
-  bodyAttrs?: HeadObject<HeadAugmentations>['bodyAttrs'];
+  bodyAttrs?: HeadObject<HeadAugmentations>['bodyAttrs']
 }

From b7bd45281e7cd540d8c249582914db529fb807ed Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 12 Oct 2022 10:22:06 +0100
Subject: [PATCH 22/28] refactor: move to dev-deps

---
 packages/schema/build.config.ts | 1 +
 packages/schema/package.json    | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/schema/build.config.ts b/packages/schema/build.config.ts
index 80bbf5fb7b2..82e22e2b494 100644
--- a/packages/schema/build.config.ts
+++ b/packages/schema/build.config.ts
@@ -22,6 +22,7 @@ export default defineBuildConfig({
     'vue-meta',
     'vue-router',
     'vue-bundle-renderer',
+    '@vueuse/head',
     'vue',
     'hookable',
     'nitropack',
diff --git a/packages/schema/package.json b/packages/schema/package.json
index 18ff7439dae..54c3e7da645 100644
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@@ -17,11 +17,11 @@
     "@types/lodash.template": "^4",
     "@types/semver": "^7",
     "@vitejs/plugin-vue": "^3.1.2",
+    "@vueuse/head": "1.0.0-rc.6",
     "unbuild": "latest",
     "vite": "~3.1.7"
   },
   "dependencies": {
-    "@vueuse/head": "1.0.0-rc.6",
     "c12": "^0.2.13",
     "create-require": "^1.1.1",
     "defu": "^6.1.0",

From 8857474605110dbe21d5789e1415376bf48d78c6 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 12 Oct 2022 10:27:15 +0100
Subject: [PATCH 23/28] fix: update type import

---
 packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
index 03e1d048720..f7b3b2bdd0c 100644
--- a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
+++ b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
@@ -1,7 +1,6 @@
 import type { HeadEntryOptions } from '@vueuse/head'
-import { createHead, renderHeadToString } from '@vueuse/head'
+import { createHead, renderHeadToString, MaybeComputedRef } from '@vueuse/head'
 import { onBeforeUnmount, getCurrentInstance } from 'vue'
-import { MaybeComputedRef } from '@vueuse/shared'
 import type { MetaObject } from '@nuxt/schema'
 import { defineNuxtPlugin, useRouter } from '#app'
 // @ts-expect-error untyped

From a8044a570c3325cdf0363641a82b18941524306b Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 12 Oct 2022 10:46:27 +0100
Subject: [PATCH 24/28] docs: add apostrophe

---
 docs/content/1.getting-started/5.seo-meta.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/content/1.getting-started/5.seo-meta.md b/docs/content/1.getting-started/5.seo-meta.md
index b16319a6657..46be27a5c4b 100644
--- a/docs/content/1.getting-started/5.seo-meta.md
+++ b/docs/content/1.getting-started/5.seo-meta.md
@@ -5,7 +5,7 @@ description: Improve your Nuxt apps SEO with powerful head config, composables a
 
 # SEO and Meta
 
-Improve your Nuxt apps SEO with powerful head config, composables and components.
+Improve your Nuxt app's SEO with powerful head config, composables and components.
 
 ## App Head
 
@@ -15,7 +15,7 @@ Providing an [app.head](/api/configuration/nuxt-config#head) property in your `n
 This method does not allow you to provide reactive data, if you need global reactive data you can use `useHead` in `app.vue`.
 ::
 
-Shortcuts are available to make configuration easier: `charset` and `viewport`. Otherwise refer to the [Types](#types).
+Shortcuts are available to make configuration easier: `charset` and `viewport`. You can also provide any other key listed below in [Types](#types).
 
 ### Defaults
 

From f94a0ab8fa3f7685f53097fc9febebf08204da79 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 12 Oct 2022 10:48:50 +0100
Subject: [PATCH 25/28] docs: and this one too

---
 docs/content/1.getting-started/5.seo-meta.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/1.getting-started/5.seo-meta.md b/docs/content/1.getting-started/5.seo-meta.md
index 46be27a5c4b..636a5b56feb 100644
--- a/docs/content/1.getting-started/5.seo-meta.md
+++ b/docs/content/1.getting-started/5.seo-meta.md
@@ -1,6 +1,6 @@
 ---
 navigation.icon: uil:file-search-alt
-description: Improve your Nuxt apps SEO with powerful head config, composables and components.
+description: Improve your Nuxt app's SEO with powerful head config, composables and components.
 ---
 
 # SEO and Meta

From 034e8ca1c10a9107cc113edfd8bea124f2d3c791 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Thu, 13 Oct 2022 01:49:48 +1100
Subject: [PATCH 26/28] chore: bump @vueuse/head, fixes titleTemplate issue

---
 packages/nuxt/package.json         |  2 +-
 packages/schema/package.json       |  2 +-
 packages/schema/src/config/_app.ts |  1 -
 yarn.lock                          | 44 ++++++++++++------------------
 4 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index 24018ff9392..e1c3816f986 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -44,7 +44,7 @@
     "@nuxt/vite-builder": "3.0.0-rc.11",
     "@vue/reactivity": "^3.2.40",
     "@vue/shared": "^3.2.40",
-    "@vueuse/head": "1.0.0-rc.6",
+    "@vueuse/head": "~1.0.0-rc.7",
     "chokidar": "^3.5.3",
     "cookie-es": "^0.5.0",
     "defu": "^6.1.0",
diff --git a/packages/schema/package.json b/packages/schema/package.json
index 54c3e7da645..ec8e035aa99 100644
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@@ -17,7 +17,7 @@
     "@types/lodash.template": "^4",
     "@types/semver": "^7",
     "@vitejs/plugin-vue": "^3.1.2",
-    "@vueuse/head": "1.0.0-rc.6",
+    "@vueuse/head": "~1.0.0-rc.7",
     "unbuild": "latest",
     "vite": "~3.1.7"
   },
diff --git a/packages/schema/src/config/_app.ts b/packages/schema/src/config/_app.ts
index 4f4fad39395..7b3f04ae10a 100644
--- a/packages/schema/src/config/_app.ts
+++ b/packages/schema/src/config/_app.ts
@@ -116,7 +116,6 @@ export default defineUntypedSchema({
     head: {
       $resolve: async (val, get) => {
         const resolved: Required<AppHeadMetaObject> = defu(val, await get('meta'), {
-          title: '',
           meta: [],
           link: [],
           style: [],
diff --git a/yarn.lock b/yarn.lock
index a0ae3bdccb2..81c9f3fb114 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1835,7 +1835,7 @@ __metadata:
     "@types/lodash.template": ^4
     "@types/semver": ^7
     "@vitejs/plugin-vue": ^3.1.2
-    "@vueuse/head": 1.0.0-rc.6
+    "@vueuse/head": ~1.0.0-rc.7
     c12: ^0.2.13
     create-require: ^1.1.1
     defu: ^6.1.0
@@ -3461,16 +3461,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vueuse/head@npm:1.0.0-rc.6":
-  version: 1.0.0-rc.6
-  resolution: "@vueuse/head@npm:1.0.0-rc.6"
+"@vueuse/head@npm:~1.0.0-rc.7":
+  version: 1.0.0-rc.7
+  resolution: "@vueuse/head@npm:1.0.0-rc.7"
   dependencies:
     "@vueuse/shared": ^9.3.0
-    "@zhead/schema": ^0.8.5
-    "@zhead/schema-vue": ^0.8.5
+    "@zhead/schema": ^0.9.5
+    "@zhead/schema-vue": ^0.9.5
   peerDependencies:
     vue: ">=2.7 || >=3"
-  checksum: 37a473cbb919cb3f45912702db717910eb048a14357b235be73ed55d4093e80a359cdd775f5b5e26c3f8e499aa8df6cc57a420dfed76f27f2b9add6fd0df0cda
+  checksum: cfb3b0edc92b97a93e0cd0af6ea082b1c44b41462fb231996be821f698396234804586baa29ad056add4de1e115bb4fb031ac62436f59182b2f3eaae432d70ea
   languageName: node
   linkType: hard
 
@@ -3739,32 +3739,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@zhead/schema-raw@npm:0.8.5":
-  version: 0.8.5
-  resolution: "@zhead/schema-raw@npm:0.8.5"
-  dependencies:
-    "@zhead/schema": 0.8.5
-  checksum: 5050beaf1ed818f3f13e77484e6c787943e730634ac81a5f53a2eef2d73517eb8784fe8996ca669de00b77b5d3dbe0296ddb2a8f0bba13e290ff46b349d73411
-  languageName: node
-  linkType: hard
-
-"@zhead/schema-vue@npm:^0.8.5":
-  version: 0.8.5
-  resolution: "@zhead/schema-vue@npm:0.8.5"
+"@zhead/schema-vue@npm:^0.9.5":
+  version: 0.9.5
+  resolution: "@zhead/schema-vue@npm:0.9.5"
   dependencies:
     "@vueuse/shared": ^9.2.0
-    "@zhead/schema": 0.8.5
-    "@zhead/schema-raw": 0.8.5
+    "@zhead/schema": 0.9.5
   peerDependencies:
     vue: ">=2.7 || >=3"
-  checksum: 162e8f984ddfd47efc0118441c9656d77d2626a3a90562c2481665c1210f6df2c8e42b8d576914a566156f35ea0599b798c7f6452f8ac380e2263f6a7c106adb
+  checksum: dda369075fa47cbfed41cdb414a39002b61231ed7d2098547edd1cf70b287523b10fdbc7351acc338c31d2885e2b8ab5b6c8fd1f4b70b9a591ac457afafe6a3b
   languageName: node
   linkType: hard
 
-"@zhead/schema@npm:0.8.5, @zhead/schema@npm:^0.8.5":
-  version: 0.8.5
-  resolution: "@zhead/schema@npm:0.8.5"
-  checksum: 9edb2c74e1e99607e982ad200c65c8c9d6acfe8557ac961d8defbb265abf822b93f6f44544ea01f3f7be9d6f6a48dae9e5745752ab83ed6a0555506a4af3223e
+"@zhead/schema@npm:0.9.5, @zhead/schema@npm:^0.9.5":
+  version: 0.9.5
+  resolution: "@zhead/schema@npm:0.9.5"
+  checksum: 88577289337b5f7b3e38d80c004f0733cdb44d0be2fc73bf13de8325dca701d5eeec53fffa176a19f56ad7d8c04c81c3e734bb650752bef91a0d72d0a61e8f5d
   languageName: node
   linkType: hard
 
@@ -10942,7 +10932,7 @@ __metadata:
     "@types/hash-sum": ^1.0.0
     "@vue/reactivity": ^3.2.40
     "@vue/shared": ^3.2.40
-    "@vueuse/head": 1.0.0-rc.6
+    "@vueuse/head": ~1.0.0-rc.7
     chokidar: ^3.5.3
     cookie-es: ^0.5.0
     defu: ^6.1.0

From 53db6110da3b5623947bbc1a7c12c99ce6bd7930 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 12 Oct 2022 16:03:33 +0100
Subject: [PATCH 27/28] style: small tweaks

---
 docs/content/3.api/1.composables/use-head.md             | 8 ++++----
 packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts | 4 ++--
 packages/schema/src/config/_app.ts                       | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/content/3.api/1.composables/use-head.md b/docs/content/3.api/1.composables/use-head.md
index 13a045b87dd..8fb170a0df2 100644
--- a/docs/content/3.api/1.composables/use-head.md
+++ b/docs/content/3.api/1.composables/use-head.md
@@ -19,7 +19,7 @@ Nuxt provides the `useHead` composable to add and customize the head properties
 useHead(meta: MaybeComputedRef<MetaObject>): void
 ```
 
-The below is the non-reactive types for `useMeta`. See [zhead](https://github.com/harlan-zw/zhead/tree/main/packages/schema/src) for more detailed types.
+Below are the non-reactive types for `useMeta`. See [zhead](https://github.com/harlan-zw/zhead/tree/main/packages/schema/src) for more detailed types.
 
 ```ts
 interface MetaObject {
@@ -30,9 +30,9 @@ interface MetaObject {
   meta?: Meta[]
   style?: Style[]
   script?: Script[]
-  noscript?: Noscript[];
-  htmlAttrs?: HtmlAttributes;
-  bodyAttrs?: BodyAttributes;
+  noscript?: Noscript[]
+  htmlAttrs?: HtmlAttributes
+  bodyAttrs?: BodyAttributes
 }
 ```
 
diff --git a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
index f7b3b2bdd0c..c055d3ef62b 100644
--- a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
+++ b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
@@ -1,5 +1,5 @@
-import type { HeadEntryOptions } from '@vueuse/head'
-import { createHead, renderHeadToString, MaybeComputedRef } from '@vueuse/head'
+import type { HeadEntryOptions, MaybeComputedRef } from '@vueuse/head'
+import { createHead, renderHeadToString } from '@vueuse/head'
 import { onBeforeUnmount, getCurrentInstance } from 'vue'
 import type { MetaObject } from '@nuxt/schema'
 import { defineNuxtPlugin, useRouter } from '#app'
diff --git a/packages/schema/src/config/_app.ts b/packages/schema/src/config/_app.ts
index 7b3f04ae10a..176afd8ed12 100644
--- a/packages/schema/src/config/_app.ts
+++ b/packages/schema/src/config/_app.ts
@@ -2,7 +2,7 @@ import { resolve, join } from 'pathe'
 import { existsSync, readdirSync } from 'node:fs'
 import defu from 'defu'
 import { defineUntypedSchema } from 'untyped'
-import { AppHeadMetaObject } from '../types/meta'
+import type { AppHeadMetaObject } from '../types/meta'
 
 export default defineUntypedSchema({
   /**

From b21a8cea43bbf2a68b255fdb6979898cdd743111 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 12 Oct 2022 16:31:06 +0100
Subject: [PATCH 28/28] test: add some very basic type tests

---
 test/fixtures/basic/types.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/test/fixtures/basic/types.ts b/test/fixtures/basic/types.ts
index 035a71abc87..d7a9320fa8d 100644
--- a/test/fixtures/basic/types.ts
+++ b/test/fixtures/basic/types.ts
@@ -120,6 +120,34 @@ describe('runtimeConfig', () => {
   })
 })
 
+describe('head', () => {
+  it('correctly types nuxt.config options', () => {
+    // @ts-expect-error
+    defineNuxtConfig({ app: { head: { titleTemplate: () => 'test' } } })
+    defineNuxtConfig({
+      app: {
+        head: {
+          meta: [{ key: 'key', name: 'description', content: 'some description ' }],
+          titleTemplate: 'test %s'
+        }
+      }
+    })
+  })
+  it('types useHead', () => {
+    useHead({
+      base: { href: '/base' },
+      link: computed(() => []),
+      meta: [
+        { key: 'key', name: 'description', content: 'some description ' },
+        () => ({ key: 'key', name: 'description', content: 'some description ' })
+      ],
+      titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} - Site Title` : 'Site Title'
+      }
+    })
+  })
+})
+
 describe('composables', () => {
   it('allows providing default refs', () => {
     expectTypeOf(useState('test', () => ref('hello'))).toEqualTypeOf<Ref<string>>()