From 49ed94e22ec742c0ed1563d97740da07460a09f4 Mon Sep 17 00:00:00 2001
From: wattanx <wattan.dev@gmail.com>
Date: Sun, 11 Jun 2023 22:56:39 +0900
Subject: [PATCH 1/8] feat: replace with @unhead/vue

---
 packages/bridge/build.config.ts               |  3 +-
 packages/bridge/package.json                  |  2 +
 packages/bridge/src/head.ts                   | 43 ++++++++++---
 packages/bridge/src/imports/presets.ts        |  1 -
 packages/bridge/src/runtime/app.plugin.mjs    |  2 +-
 .../bridge/src/runtime/head/components.ts     | 55 +++++++++++++++--
 .../bridge/src/runtime/head/composables.ts    | 16 +----
 packages/bridge/src/runtime/head/plugin.ts    | 39 +-----------
 .../bridge/src/runtime/head/plugins/unhead.ts | 43 +++++++++++++
 .../src/runtime/head/vueuse-head.plugin.ts    | 59 ------------------
 playground/nuxt.config.ts                     | 10 ++++
 playground/pages/head-script-setup.vue        | 57 ++++++++++++++++++
 playground/pages/head.vue                     | 37 ++++++++++++
 pnpm-lock.yaml                                | 59 +++++++++++-------
 test/bridge.test.ts                           | 60 +++++++++++++++++++
 15 files changed, 338 insertions(+), 148 deletions(-)
 create mode 100644 packages/bridge/src/runtime/head/plugins/unhead.ts
 delete mode 100644 packages/bridge/src/runtime/head/vueuse-head.plugin.ts
 create mode 100644 playground/pages/head-script-setup.vue
 create mode 100644 playground/pages/head.vue

diff --git a/packages/bridge/build.config.ts b/packages/bridge/build.config.ts
index 8943b9ea2..a7ead832e 100644
--- a/packages/bridge/build.config.ts
+++ b/packages/bridge/build.config.ts
@@ -10,6 +10,7 @@ export default defineBuildConfig({
     'webpack',
     'vite',
     'vue',
-    'vue-meta'
+    'vue-meta',
+    '@unhead/vue'
   ]
 })
diff --git a/packages/bridge/package.json b/packages/bridge/package.json
index 3fa410a0c..1474d946e 100644
--- a/packages/bridge/package.json
+++ b/packages/bridge/package.json
@@ -29,6 +29,8 @@
     "@nuxt/postcss8": "^1.1.3",
     "@nuxt/schema": "3.5.3",
     "@nuxt/ui-templates": "^1.1.1",
+    "@unhead/ssr": "^1.1.27",
+    "@unhead/vue": "^1.1.27",
     "@vitejs/plugin-legacy": "^4.0.4",
     "@vitejs/plugin-vue2": "^2.2.0",
     "acorn": "^8.8.2",
diff --git a/packages/bridge/src/head.ts b/packages/bridge/src/head.ts
index 4c601342c..c7a5e4f2b 100644
--- a/packages/bridge/src/head.ts
+++ b/packages/bridge/src/head.ts
@@ -1,9 +1,11 @@
 import { resolve } from 'pathe'
-import { addPlugin, addTemplate, defineNuxtModule, tryResolveModule } from '@nuxt/kit'
+import { addComponent, addImportsSources, addPlugin, addTemplate, defineNuxtModule } from '@nuxt/kit'
 import { defu } from 'defu'
 import type { MetaObject } from '@nuxt/schema'
 import { distDir } from './dirs'
 
+const components = ['NoScript', 'Link', 'Base', 'Title', 'Meta', 'Style', 'Head', 'Html', 'Body']
+
 export default defineNuxtModule({
   meta: {
     name: 'meta'
@@ -15,13 +17,26 @@ export default defineNuxtModule({
   setup (options, nuxt) {
     const runtimeDir = nuxt.options.alias['#head'] || resolve(distDir, 'head/runtime')
 
-    // Transpile @nuxt/meta and @vueuse/head
-    nuxt.options.build.transpile.push('@vueuse/head')
-    nuxt.options.build.transpile.push('unhead')
+    // Transpile @unhead/vue
+    nuxt.options.build.transpile.push('@unhead/vue')
 
     // Add #head alias
     nuxt.options.alias['#head'] = runtimeDir
 
+    // Register components
+    const componentsPath = resolve(runtimeDir, 'components')
+    for (const componentName of components) {
+      addComponent({
+        name: componentName,
+        filePath: componentsPath,
+        export: componentName,
+        // built-in that we do not expect the user to override
+        priority: 10,
+        // kebab case version of these tags is not valid
+        kebabName: componentName
+      })
+    }
+
     // Global meta -for Bridge, this is necessary to repeat here
     // and in packages/schema/src/config/_app.ts
     const globalMeta: MetaObject = defu(nuxt.options.app.head, {
@@ -35,14 +50,24 @@ export default defineNuxtModule({
       getContents: () => 'export default ' + JSON.stringify({ globalMeta, mixinKey: 'setup' })
     })
 
-    if (!tryResolveModule('@vueuse/head')) {
-      console.warn('[bridge] Could not find `@vueuse/head`. You may need to install it.')
-    }
+    addImportsSources({
+      from: '@unhead/vue',
+      // hard-coded for now we so don't support auto-imports on the deprecated composables
+      imports: [
+        'injectHead',
+        'useHead',
+        'useSeoMeta',
+        'useHeadSafe',
+        'useServerHead',
+        'useServerSeoMeta',
+        'useServerHeadSafe'
+      ]
+    })
 
     // Add generic plugin
     addPlugin({ src: resolve(runtimeDir, 'plugin') })
 
-    // Add library specific plugin
-    addPlugin({ src: resolve(runtimeDir, 'vueuse-head.plugin') })
+    // Add library-specific plugin
+    addPlugin({ src: resolve(runtimeDir, 'plugins/unhead') })
   }
 })
diff --git a/packages/bridge/src/imports/presets.ts b/packages/bridge/src/imports/presets.ts
index 5bac68694..0b453136b 100644
--- a/packages/bridge/src/imports/presets.ts
+++ b/packages/bridge/src/imports/presets.ts
@@ -5,7 +5,6 @@ export const commonPresets: InlinePreset[] = [
   defineUnimportPreset({
     from: '#head',
     imports: [
-      'useHead',
       'useMeta'
     ]
   }),
diff --git a/packages/bridge/src/runtime/app.plugin.mjs b/packages/bridge/src/runtime/app.plugin.mjs
index 40bc03508..43bfe915c 100644
--- a/packages/bridge/src/runtime/app.plugin.mjs
+++ b/packages/bridge/src/runtime/app.plugin.mjs
@@ -41,7 +41,7 @@ export default async (ctx, inject) => {
       provide: inject,
       unmount: () => { },
       use (vuePlugin) {
-        runOnceWith(vuePlugin, () => vuePlugin.install(this))
+        runOnceWith(vuePlugin, () => Vue.use(vuePlugin))
       },
       version
     },
diff --git a/packages/bridge/src/runtime/head/components.ts b/packages/bridge/src/runtime/head/components.ts
index 651b77fb8..72e30096a 100644
--- a/packages/bridge/src/runtime/head/components.ts
+++ b/packages/bridge/src/runtime/head/components.ts
@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue'
 import type { SetupContext } from 'vue'
-import { useHead } from './composables'
+import { useHead } from '@unhead/vue'
 
 type Props = Readonly<Record<string, any>>
 
@@ -58,10 +58,36 @@ const globalProps = {
   translate: String
 }
 
+// <noscript>
+export const NoScript = defineComponent({
+  name: 'NoScript',
+  inheritAttrs: false,
+  props: {
+    ...globalProps,
+    title: String,
+    body: Boolean,
+    renderPriority: [String, Number]
+  },
+  setup: setupForUseMeta((props, { slots }) => {
+    const noscript = { ...props }
+    const textContent = (slots.default?.() || [])
+      .filter(({ children }) => children)
+      .map(({ children }) => children)
+      .join('')
+    if (textContent) {
+      noscript.children = textContent
+    }
+    return {
+      noscript: [noscript]
+    }
+  })
+})
+
 // <script>
 export const Script = defineComponent({
   // eslint-disable-next-line vue/no-reserved-component-names
   name: 'Script',
+  inheritAttrs: false,
   props: {
     ...globalProps,
     async: Boolean,
@@ -90,6 +116,7 @@ export const Script = defineComponent({
 export const Link = defineComponent({
   // eslint-disable-next-line vue/no-reserved-component-names
   name: 'Link',
+  inheritAttrs: false,
   props: {
     ...globalProps,
     as: String,
@@ -124,6 +151,7 @@ export const Link = defineComponent({
 export const Base = defineComponent({
   // eslint-disable-next-line vue/no-reserved-component-names
   name: 'Base',
+  inheritAttrs: false,
   props: {
     ...globalProps,
     href: String,
@@ -139,7 +167,7 @@ export const Title = defineComponent({
   // eslint-disable-next-line vue/no-reserved-component-names
   name: 'Title',
   setup: setupForUseMeta((_, { slots }) => {
-    const title = slots.default()?.[0]?.children || null
+    const title = slots.default()?.[0]?.text || null
     if (process.dev && title && typeof title !== 'string') {
       console.error('<Title> can only take a string in its default slot.')
     }
@@ -153,22 +181,34 @@ export const Title = defineComponent({
 export const Meta = defineComponent({
   // eslint-disable-next-line vue/no-reserved-component-names
   name: 'Meta',
+  inheritAttrs: false,
   props: {
     ...globalProps,
     charset: String,
     content: String,
     httpEquiv: String,
-    name: String
+    name: String,
+    body: Boolean,
+    renderPriority: [String, Number]
   },
-  setup: setupForUseMeta(meta => ({
-    meta: [meta]
-  }))
+  setup: setupForUseMeta((props) => {
+    const meta = { ...props }
+    // fix casing for http-equiv
+    if (meta.httpEquiv) {
+      meta['http-equiv'] = meta.httpEquiv
+      delete meta.httpEquiv
+    }
+    return {
+      meta: [meta]
+    }
+  })
 })
 
 // <style>
 export const Style = defineComponent({
   // eslint-disable-next-line vue/no-reserved-component-names
   name: 'Style',
+  inheritAttrs: false,
   props: {
     ...globalProps,
     type: String,
@@ -200,6 +240,7 @@ export const Style = defineComponent({
 export const Head = defineComponent({
   // eslint-disable-next-line vue/no-reserved-component-names
   name: 'Head',
+  inheritAttrs: false,
   setup: (_props, ctx) => () => ctx.slots.default?.()
 })
 
@@ -207,6 +248,7 @@ export const Head = defineComponent({
 export const Html = defineComponent({
   // eslint-disable-next-line vue/no-reserved-component-names
   name: 'Html',
+  inheritAttrs: false,
   props: {
     ...globalProps,
     manifest: String,
@@ -220,6 +262,7 @@ export const Html = defineComponent({
 export const Body = defineComponent({
   // eslint-disable-next-line vue/no-reserved-component-names
   name: 'Body',
+  inheritAttrs: false,
   props: globalProps,
   setup: setupForUseMeta(bodyAttrs => ({ bodyAttrs }), true)
 })
diff --git a/packages/bridge/src/runtime/head/composables.ts b/packages/bridge/src/runtime/head/composables.ts
index 4a1e4b65d..0ebbaddc8 100644
--- a/packages/bridge/src/runtime/head/composables.ts
+++ b/packages/bridge/src/runtime/head/composables.ts
@@ -1,20 +1,6 @@
-import { isFunction } from '@vue/shared'
-import { computed } from 'vue'
+import { useHead } from '@unhead/vue'
 import type { ComputedGetter } from '@vue/reactivity'
 import type { MetaObject } from '@nuxt/schema'
-import { useNuxtApp } from '../app'
-
-/**
- * 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`.
- *
- * Alternatively, for reactive meta state, you can pass in a function
- * that returns a meta object.
- */
-export function useHead (meta: MetaObject | ComputedGetter<MetaObject>) {
-  const resolvedMeta = isFunction(meta) ? computed(meta) : meta
-  useNuxtApp()._useHead(resolvedMeta)
-}
 
 // TODO: remove useMeta support when Nuxt 3 is stable
 /** @deprecated Please use new `useHead` composable instead */
diff --git a/packages/bridge/src/runtime/head/plugin.ts b/packages/bridge/src/runtime/head/plugin.ts
index def579a18..9036595c1 100644
--- a/packages/bridge/src/runtime/head/plugin.ts
+++ b/packages/bridge/src/runtime/head/plugin.ts
@@ -1,39 +1,6 @@
-import { computed, getCurrentInstance, markRaw } from 'vue'
-import * as Components from './components'
-import { useHead } from './composables'
-import { defineNuxtPlugin, useNuxtApp } from '#app'
-// @ts-ignore
-import metaConfig from '#build/meta.config.mjs'
-
-type MetaComponents = typeof Components
-declare module 'vue' {
-  export interface GlobalComponents extends MetaComponents {}
-}
-
-const metaMixin = {
-  [metaConfig.mixinKey] () {
-    const instance = getCurrentInstance()
-    if (!instance) { return }
-
-    const options = instance.type || /* nuxt2 */ instance.proxy?.$options
-    if (!options || !('head' in options)) { return }
-
-    const nuxtApp = useNuxtApp()
-    const source = typeof options.head === 'function'
-      ? computed(() => options.head(nuxtApp))
-      : options.head
-
-    useHead(source)
-  }
-}
+import { VueHeadMixin } from '@unhead/vue'
+import { defineNuxtPlugin } from '../app'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  useHead(markRaw(metaConfig.globalMeta))
-
-  nuxtApp.vueApp.mixin(metaMixin)
-
-  for (const name in Components) {
-    // eslint-disable-next-line import/namespace
-    nuxtApp.vueApp.component(name, Components[name])
-  }
+  nuxtApp.vueApp.mixin(VueHeadMixin)
 })
diff --git a/packages/bridge/src/runtime/head/plugins/unhead.ts b/packages/bridge/src/runtime/head/plugins/unhead.ts
new file mode 100644
index 000000000..0938fe2fa
--- /dev/null
+++ b/packages/bridge/src/runtime/head/plugins/unhead.ts
@@ -0,0 +1,43 @@
+import { createHead as createClientHead, createServerHead, Vue2ProvideUnheadPlugin } from '@unhead/vue'
+import { markRaw } from 'vue'
+import { renderSSRHead } from '@unhead/ssr'
+import { defineNuxtPlugin } from '../../app'
+// @ts-ignore
+import metaConfig from '#build/meta.config.mjs'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const createHead = process.server ? createServerHead : createClientHead
+  const head = createHead()
+  head.push(markRaw(metaConfig.globalMeta))
+
+  nuxtApp.vueApp.use(Vue2ProvideUnheadPlugin, head)
+  nuxtApp.vueApp.use(head)
+
+  if (process.client) {
+    // pause dom updates until page is ready and between page transitions
+    let pauseDOMUpdates = true
+    const unpauseDom = () => {
+      pauseDOMUpdates = false
+      // trigger the debounced DOM update
+      head.hooks.callHook('entries:updated', head)
+    }
+
+    head.hooks.hook('dom:beforeRender', (context) => { context.shouldRender = !pauseDOMUpdates })
+
+    nuxtApp.hooks.hook('render:before', () => { pauseDOMUpdates = true })
+    // wait for new page before unpausing dom updates
+    nuxtApp.hooks.hook('render:done', unpauseDom)
+  }
+
+  if (process.server) {
+      nuxtApp.ssrContext!.renderMeta = async () => {
+        const meta = await renderSSRHead(head)
+        return {
+          ...meta,
+          bodyScriptsPrepend: meta.bodyTagsOpen,
+          // resolves naming difference with NuxtMeta and Unhead
+          bodyScripts: meta.bodyTags
+        }
+      }
+  }
+})
diff --git a/packages/bridge/src/runtime/head/vueuse-head.plugin.ts b/packages/bridge/src/runtime/head/vueuse-head.plugin.ts
deleted file mode 100644
index 70b15745c..000000000
--- a/packages/bridge/src/runtime/head/vueuse-head.plugin.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { createHead, renderHeadToString } from '@vueuse/head'
-import { computed, ref, watchEffect, onBeforeUnmount, getCurrentInstance, ComputedGetter } from 'vue'
-import { defu } from 'defu'
-import type { MetaObject } from '@nuxt/schema'
-import { defineNuxtPlugin } from '../app'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  const head = createHead()
-
-  nuxtApp.vueApp.use(head)
-
-  let headReady = false
-  nuxtApp.hooks.hookOnce('app:mounted', () => {
-    watchEffect(() => { head.updateDOM() })
-    headReady = true
-  })
-
-  const titleTemplate = ref<MetaObject['titleTemplate']>()
-
-  nuxtApp._useHead = (_meta: MetaObject | ComputedGetter<MetaObject>) => {
-    const meta = ref<MetaObject>(_meta)
-    if ('titleTemplate' in meta.value) {
-      titleTemplate.value = meta.value.titleTemplate
-    }
-
-    const headObj = computed(() => {
-      const overrides: MetaObject = { meta: [] }
-      if (titleTemplate.value && meta.value.title) {
-        overrides.title = typeof titleTemplate.value === 'function' ? titleTemplate.value(meta.value.title) : titleTemplate.value.replace(/%s/g, meta.value.title)
-      }
-      if (meta.value.charset) {
-        overrides.meta!.push({ key: 'charset', 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)
-
-    if (process.server) { return }
-
-    if (headReady) {
-      watchEffect(() => { head.updateDOM() })
-    }
-
-    const vm = getCurrentInstance()
-    if (!vm) { return }
-
-    onBeforeUnmount(() => {
-      head.removeHeadObjs(headObj as any)
-      head.updateDOM()
-    })
-  }
-
-  if (process.server && nuxtApp.ssrContext) {
-    nuxtApp.ssrContext.renderMeta = () => renderHeadToString(head)
-  }
-})
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 5b89ec81d..09438d2ff 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -5,6 +5,16 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 global.__NUXT_PREPATHS__ = (global.__NUXT_PREPATHS__ || []).concat(__dirname)
 
 export default defineNuxtConfig({
+  app: {
+    // @ts-ignore TODO: add types
+    head: {
+      meta: [
+        { name: 'viewport', content: 'width=1024, initial-scale=1' },
+        { charset: 'utf-8' },
+        { name: 'description', content: 'Nuxt Fixture' }
+      ]
+    }
+  },
   components: true,
   serverMiddleware: [
     {
diff --git a/playground/pages/head-script-setup.vue b/playground/pages/head-script-setup.vue
new file mode 100644
index 000000000..75ab7d38d
--- /dev/null
+++ b/playground/pages/head-script-setup.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+const description = ref('head script setup description for %site.name')
+const siteName = ref()
+// server meta
+useServerSeoMeta({
+  description,
+  ogDescription: description,
+  ogImage: '%site.url/og-image.png',
+  ogTitle: '%s %separator %site.name',
+  ogType: 'website',
+  ogUrl: '%site.url/head-script-setup'
+})
+
+useServerHead({
+  style: [
+    '/* Custom styles */',
+    'h1 { color: salmon; }'
+  ]
+})
+
+useHead({
+  title: 'head script setup',
+  titleTemplate: '%s %separator %site.name',
+  templateParams: {
+    separator: () => '-',
+    site: {
+      url: 'https://example.com',
+      name: siteName
+    }
+  }
+})
+
+useHeadSafe({
+  script: [
+    {
+      id: 'xss-script',
+      // @ts-expect-error not allowed
+      innerHTML: 'alert("xss")'
+    }
+  ],
+  meta: [
+    {
+      // @ts-expect-error not allowed
+      'http-equiv': 'refresh',
+      content: '0;javascript:alert(1)'
+    }
+  ]
+})
+
+siteName.value = 'Nuxt Playground'
+</script>
+
+<template>
+  <div>
+    <h1>head script setup</h1>
+  </div>
+</template>
diff --git a/playground/pages/head.vue b/playground/pages/head.vue
new file mode 100644
index 000000000..533152a34
--- /dev/null
+++ b/playground/pages/head.vue
@@ -0,0 +1,37 @@
+<script>
+export default defineComponent({
+  setup () {
+    const a = ref('')
+    useHead({
+      // title template function example
+      titleTemplate: title => `${title} - Title Template Fn Change`,
+      bodyAttrs: {
+        class: 'body-attrs-test'
+      },
+      htmlAttrs: {
+        class: 'html-attrs-test'
+      },
+      script: [
+        {
+          src: 'https://a-body-appended-script.com',
+          body: true
+        }
+      ],
+      meta: [{ name: 'description', content: 'first' }]
+    })
+    useHead({ meta: [{ charset: 'utf-16' }, { name: 'description', content: computed(() => `${a.value} with an inline useHead call`) }] })
+    a.value = 'overriding'
+  }
+})
+</script>
+
+<template>
+  <div>
+    <Head>
+      <div>
+        <Title>Using a dynamic component</Title>
+        <Meta http-equiv="content-security-policy" content="default-src https" />
+      </div>
+    </Head>
+  </div>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1122da6a2..a72ae6968 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -63,6 +63,12 @@ importers:
       '@nuxt/ui-templates':
         specifier: ^1.1.1
         version: 1.1.1
+      '@unhead/ssr':
+        specifier: ^1.1.27
+        version: 1.1.27
+      '@unhead/vue':
+        specifier: ^1.1.27
+        version: 1.1.27(vue@2.7.14)
       '@vitejs/plugin-legacy':
         specifier: ^4.0.4
         version: 4.0.4(terser@5.17.7)(vite@4.3.9)
@@ -3717,6 +3723,12 @@ packages:
       '@unhead/shared': 1.1.26
     dev: true
 
+  /@unhead/dom@1.1.27:
+    resolution: {integrity: sha512-sUrzpKIVvFp8TFx1mgp5t0k5ts1+KmgjMgRRuvRTZMBMVeGQRLSuL3uo34iwuFmKxeI6BXT5lVBk5H02c1XdGg==}
+    dependencies:
+      '@unhead/schema': 1.1.27
+      '@unhead/shared': 1.1.27
+
   /@unhead/schema@1.1.26:
     resolution: {integrity: sha512-l93zaizm+pu36uMssdtzSC2Y61ncZaBBouZn0pB8rVI14V0hPxeXuSNIuPh2WjAm8wfb8EnCSE3LNguoqTar7g==}
     dependencies:
@@ -3724,30 +3736,39 @@ packages:
       zhead: 2.0.4
     dev: true
 
+  /@unhead/schema@1.1.27:
+    resolution: {integrity: sha512-S+xhPoBxBXDrsW9ltcF9Cv3cntMbSx+dfSmE7RNyDhogqHd3+lDEV2dnQpHKWTGjujwwMCALV5SADunAn785bw==}
+    dependencies:
+      hookable: 5.5.3
+      zhead: 2.0.4
+
   /@unhead/shared@1.1.26:
     resolution: {integrity: sha512-gnUfNrl8w7hQHke9P0au7klcG9bHVOXqbDvya2uARA/8TyxNz87i0uakraO+P6/+zf484dw3b3MYkXq0thK2eg==}
     dependencies:
       '@unhead/schema': 1.1.26
     dev: true
 
-  /@unhead/ssr@1.1.26:
-    resolution: {integrity: sha512-KYJDGgVNtU2i+NHu17o2zFXqsoLukOFEz81XrWQ8nQdY5+VNjy7IiTLp1dlx3umn1ohZjHySz4LXQCT4zUApSw==}
+  /@unhead/shared@1.1.27:
+    resolution: {integrity: sha512-ElZ5WcMnhVlg44OAwTNq4XBkNePcL/BHZk7WKFcqpeGTJrEvSfs40lGJoo4sMsgDAd+XQdhJDd4dJu48jQB3kg==}
     dependencies:
-      '@unhead/schema': 1.1.26
-      '@unhead/shared': 1.1.26
-    dev: true
+      '@unhead/schema': 1.1.27
 
-  /@unhead/vue@1.1.26(vue@2.7.14):
-    resolution: {integrity: sha512-UpxQ0KGmOoiN+Dg19zto5KTcnGV5chBmgiVJTDqUF4BPfr24vRrR65sZGdMoNV7weuD3AD/K0osk2ru+vXxRrA==}
+  /@unhead/ssr@1.1.27:
+    resolution: {integrity: sha512-lKXH2ofs8L+yAbHgkRP17bIQ45XaG2RSl5UCMsSIW2Ev4kiTGPbbcQKOBgsi2uEllgdMk5peKDyaWD9xheYlEA==}
+    dependencies:
+      '@unhead/schema': 1.1.27
+      '@unhead/shared': 1.1.27
+
+  /@unhead/vue@1.1.27(vue@2.7.14):
+    resolution: {integrity: sha512-ibe7/QW4ZtyCI/et/fI3CnwC+oxqp+7LrhmuLUS93ib1Sl70D51dcAy9eAvh0MG7wWUyMUrf3T95MRifJo7uzA==}
     peerDependencies:
       vue: '>=2.7 || >=3'
     dependencies:
-      '@unhead/schema': 1.1.26
-      '@unhead/shared': 1.1.26
+      '@unhead/schema': 1.1.27
+      '@unhead/shared': 1.1.27
       hookable: 5.5.3
-      unhead: 1.1.26
+      unhead: 1.1.27
       vue: 2.7.14
-    dev: true
 
   /@vercel/nft@0.22.6:
     resolution: {integrity: sha512-gTsFnnT4mGxodr4AUlW3/urY+8JKKB452LwF3m477RFUJTAaDmcz2JqFuInzvdybYIeyIv1sSONEJxsxnbQ5JQ==}
@@ -4105,8 +4126,8 @@ packages:
     dependencies:
       '@unhead/dom': 1.1.26
       '@unhead/schema': 1.1.26
-      '@unhead/ssr': 1.1.26
-      '@unhead/vue': 1.1.26(vue@2.7.14)
+      '@unhead/ssr': 1.1.27
+      '@unhead/vue': 1.1.27(vue@2.7.14)
       vue: 2.7.14
     dev: true
 
@@ -11455,14 +11476,13 @@ packages:
     resolution: {integrity: sha512-3xM2c89siXg0nHvlmYsQ2zkLASvVMBisZm5lF3gFDqfF2xonNStDJyMpvaOBe0a1Edxmqrf2E0HBdmy9QyZaeg==}
     dev: true
 
-  /unhead@1.1.26:
-    resolution: {integrity: sha512-MshcPoPLXSGRgYtczddGvMgLUISTbt2pxihqD5kZVXKmY2FZLj1OQIY111aX45Xq47XJxjvYavvoyeUFroKQcg==}
+  /unhead@1.1.27:
+    resolution: {integrity: sha512-KnE4xeV/mZLxnXG1VAp1nsaO2vzMq9Ch5uN4Y2SJAG4fXLEBi/A8evr3Vd81c+oAwQZjDXKFW60HDCJCkwo/Cw==}
     dependencies:
-      '@unhead/dom': 1.1.26
-      '@unhead/schema': 1.1.26
-      '@unhead/shared': 1.1.26
+      '@unhead/dom': 1.1.27
+      '@unhead/schema': 1.1.27
+      '@unhead/shared': 1.1.27
       hookable: 5.5.3
-    dev: true
 
   /unicode-canonical-property-names-ecmascript@2.0.0:
     resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}
@@ -12381,7 +12401,6 @@ packages:
 
   /zhead@2.0.4:
     resolution: {integrity: sha512-V4R94t3ifk9AURym6OskbKcnowzgp5Z88tkoL/NF67vyryNxC62u6mx5F1Ux4oh4+YN7FFmKYEyWy6m5kfPH6g==}
-    dev: true
 
   /zip-stream@4.1.0:
     resolution: {integrity: sha512-zshzwQW7gG7hjpBlgeQP9RuyPGNxvJdzR8SUM3QhxCnLjWN2E7j3dOvpeDcQoETfHx0urRS7EtmVToql7YpU4A==}
diff --git a/test/bridge.test.ts b/test/bridge.test.ts
index 508ac1e91..94f254aa1 100644
--- a/test/bridge.test.ts
+++ b/test/bridge.test.ts
@@ -17,6 +17,51 @@ await setup({
   }
 })
 
+describe('head tags', () => {
+  it('SSR should render tags', async () => {
+    const headHtml = await $fetch('/head')
+    console.log(headHtml)
+
+    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">')
+    expect(headHtml.match('meta charset').length).toEqual(1)
+    expect(headHtml).toContain('<meta name="viewport" content="width=1024, initial-scale=1">')
+    expect(headHtml.match('meta name="viewport"').length).toEqual(1)
+    expect(headHtml).not.toContain('<meta charset="utf-8">')
+    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 src="https://a-body-appended-script.com"></script>')
+
+    const indexHtml = await $fetch('/')
+    // should render charset by default
+    expect(indexHtml).toContain('<meta charset="utf-8">')
+  })
+
+  it('SSR script setup should render tags', async () => {
+    const headHtml = await $fetch('/head-script-setup')
+
+    // useHead - title & titleTemplate are working
+    expect(headHtml).toContain('<title>head script setup - Nuxt Playground</title>')
+    // useSeoMeta - template params
+    expect(headHtml).toContain('<meta property="og:title" content="head script setup - Nuxt Playground">')
+    // useSeoMeta - refs
+    expect(headHtml).toContain('<meta name="description" content="head script setup description for Nuxt Playground">')
+    // useServerHead - shorthands
+    expect(headHtml).toContain('>/* Custom styles */</style>')
+    // useHeadSafe - removes dangerous content
+    expect(headHtml).toContain('<script id="xss-script"></script>')
+    expect(headHtml).toContain('<meta content="0;javascript:alert(1)">')
+  })
+
+  it('should render http-equiv correctly', async () => {
+    const html = await $fetch('/head')
+    // http-equiv should be rendered kebab case
+    expect(html).toContain('<meta content="default-src https" http-equiv="content-security-policy">')
+  })
+})
+
 describe('pages', () => {
   it('render hello world', async () => {
     const html = await $fetch('/')
@@ -176,6 +221,21 @@ describe('dynamic paths', () => {
           \\"basePath\\": \\"/\\",
           \\"assetsPath\\": \\"/_nuxt/\\",
           \\"cdnURL\\": \\"\\",
+          \\"head\\": {
+            \\"meta\\": [
+              {
+                \\"name\\": \\"viewport\\",
+                \\"content\\": \\"width=1024, initial-scale=1\\"
+              },
+              {
+                \\"charset\\": \\"utf-8\\"
+              },
+              {
+                \\"name\\": \\"description\\",
+                \\"content\\": \\"Nuxt Fixture\\"
+              }
+            ]
+          },
           \\"buildAssetsDir\\": \\"/_nuxt/\\"
         },
         \\"nitro\\": {

From 8e89394e9127c34322278695e6938d57a290395f Mon Sep 17 00:00:00 2001
From: wattanx <wattan.dev@gmail.com>
Date: Sun, 11 Jun 2023 22:59:55 +0900
Subject: [PATCH 2/8] fix: Add use cases in layouts to tests

---
 playground/layouts/default.vue | 5 +++++
 playground/pages/head.vue      | 2 --
 test/bridge.test.ts            | 3 +--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/playground/layouts/default.vue b/playground/layouts/default.vue
index 7e12ec001..acd2ba906 100644
--- a/playground/layouts/default.vue
+++ b/playground/layouts/default.vue
@@ -10,6 +10,11 @@
 export default {
   setup () {
     const route = useRoute()
+    useHead({
+      titleTemplate (title) {
+        return `${title} - Nuxt Bridge Playground`
+      }
+    })
     return { route }
   }
 }
diff --git a/playground/pages/head.vue b/playground/pages/head.vue
index 533152a34..a623e2876 100644
--- a/playground/pages/head.vue
+++ b/playground/pages/head.vue
@@ -3,8 +3,6 @@ export default defineComponent({
   setup () {
     const a = ref('')
     useHead({
-      // title template function example
-      titleTemplate: title => `${title} - Title Template Fn Change`,
       bodyAttrs: {
         class: 'body-attrs-test'
       },
diff --git a/test/bridge.test.ts b/test/bridge.test.ts
index 94f254aa1..2a346666e 100644
--- a/test/bridge.test.ts
+++ b/test/bridge.test.ts
@@ -20,9 +20,8 @@ await setup({
 describe('head tags', () => {
   it('SSR should render tags', async () => {
     const headHtml = await $fetch('/head')
-    console.log(headHtml)
 
-    expect(headHtml).toContain('<title>Using a dynamic component - Title Template Fn Change</title>')
+    expect(headHtml).toContain('<title>Using a dynamic component - Nuxt Bridge Playground</title>')
     expect(headHtml).not.toContain('<meta name="description" content="first">')
     expect(headHtml).toContain('<meta charset="utf-16">')
     expect(headHtml.match('meta charset').length).toEqual(1)

From 2845c29de15a7ed35be4426e89e61239ba1889aa Mon Sep 17 00:00:00 2001
From: wattanx <wattan.dev@gmail.com>
Date: Mon, 12 Jun 2023 08:58:52 +0900
Subject: [PATCH 3/8] fix: fix transpile setting

---
 packages/bridge/src/head.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bridge/src/head.ts b/packages/bridge/src/head.ts
index c7a5e4f2b..04a36ddbd 100644
--- a/packages/bridge/src/head.ts
+++ b/packages/bridge/src/head.ts
@@ -17,8 +17,8 @@ export default defineNuxtModule({
   setup (options, nuxt) {
     const runtimeDir = nuxt.options.alias['#head'] || resolve(distDir, 'head/runtime')
 
-    // Transpile @unhead/vue
-    nuxt.options.build.transpile.push('@unhead/vue')
+    // Transpile @unhead/vue and @unhead/ssr
+    nuxt.options.build.transpile.push('unhead')
 
     // Add #head alias
     nuxt.options.alias['#head'] = runtimeDir

From 0b11e9249beeb417bf012d9d64f6225cfe86ba3c Mon Sep 17 00:00:00 2001
From: wattanx <wattan.dev@gmail.com>
Date: Mon, 12 Jun 2023 08:59:25 +0900
Subject: [PATCH 4/8] fix: If you don't explicitly import it, it won't work
 with webpack.

---
 playground/pages/head.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/playground/pages/head.vue b/playground/pages/head.vue
index a623e2876..fefaaa588 100644
--- a/playground/pages/head.vue
+++ b/playground/pages/head.vue
@@ -1,5 +1,13 @@
 <script>
+import { Title, Meta } from '#build/components'
+
 export default defineComponent({
+  components: {
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Title,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Meta
+  },
   setup () {
     const a = ref('')
     useHead({

From ef61b0ada051284d2eb93ff51a331ea002326bf9 Mon Sep 17 00:00:00 2001
From: wattanx <wattan.dev@gmail.com>
Date: Mon, 12 Jun 2023 09:24:18 +0900
Subject: [PATCH 5/8] fix: fix app.head types

---
 README.md                                |   2 +-
 packages/bridge-schema/build.config.ts   |   2 +-
 packages/bridge-schema/package.json      |   2 +-
 packages/bridge-schema/src/config/app.ts |  70 ++++++++++++---
 packages/bridge-schema/src/types/head.ts |  31 +++++++
 packages/bridge/package.json             |   1 -
 playground/nuxt.config.ts                |   1 -
 playground/package.json                  |   1 -
 pnpm-lock.yaml                           | 103 +++--------------------
 9 files changed, 105 insertions(+), 108 deletions(-)
 create mode 100644 packages/bridge-schema/src/types/head.ts

diff --git a/README.md b/README.md
index 68427c68f..63ce7bbb5 100644
--- a/README.md
+++ b/README.md
@@ -223,7 +223,7 @@ export default defineNuxtConfig({
 })
 ```
 
-This `useHead` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your `<head>`.
+This `useHead` composable uses `@unhead/vue` under the hood (rather than `vue-meta`) to manipulate your `<head>`.
 Accordingly, we recommend not to use both the native Nuxt 2 `head()` properties as well as `useHead`, as they may conflict.
 
 For more information on how to use this composable, see [the docs](https://nuxt.com/docs/getting-started/seo-meta#seo-and-meta).
diff --git a/packages/bridge-schema/build.config.ts b/packages/bridge-schema/build.config.ts
index be771c31d..e698b5c16 100644
--- a/packages/bridge-schema/build.config.ts
+++ b/packages/bridge-schema/build.config.ts
@@ -40,7 +40,6 @@ export default defineBuildConfig({
     'vue-meta',
     'vue-router',
     'vue-bundle-renderer',
-    '@vueuse/head',
     'vue',
     'hookable',
     'nitropack',
@@ -57,6 +56,7 @@ export default defineBuildConfig({
     'postcss',
     'consola',
     'ignore',
+    '@unhead/schema',
     // Implicit
     '@vue/compiler-core',
     '@vue/shared',
diff --git a/packages/bridge-schema/package.json b/packages/bridge-schema/package.json
index a891630e0..997c83b1a 100644
--- a/packages/bridge-schema/package.json
+++ b/packages/bridge-schema/package.json
@@ -17,7 +17,7 @@
   "devDependencies": {
     "@types/lodash.template": "^4.5.1",
     "@types/semver": "^7.5.0",
-    "@vueuse/head": "^1.1.26",
+    "@unhead/schema": "^1.1.27",
     "nitropack": "^2.4.1",
     "unbuild": "latest",
     "vite": "~4.3.9"
diff --git a/packages/bridge-schema/src/config/app.ts b/packages/bridge-schema/src/config/app.ts
index c8c5f5e96..c1de9d10a 100644
--- a/packages/bridge-schema/src/config/app.ts
+++ b/packages/bridge-schema/src/config/app.ts
@@ -2,12 +2,12 @@ import { existsSync, readdirSync } from 'node:fs'
 import { defineUntypedSchema } from 'untyped'
 import { resolve, join } from 'pathe'
 import defu from 'defu'
+import { AppHeadMetaObject } from '../types/head'
 
 export default defineUntypedSchema({
   vue: {
     /**
      * Properties that will be set directly on `Vue.config` for vue@2.
-     *
      * @see [vue@2 Documentation](https://v2.vuejs.org/v2/api/#Global-Config)
      * @type {typeof import('vue/types/vue').VueConfiguration}
      */
@@ -24,18 +24,75 @@ export default defineUntypedSchema({
   app: {
     /**
      * The folder name for the built site assets, relative to `baseURL` (or `cdnURL` if set).
-     *
      * @deprecated - use `buildAssetsDir` instead
      */
     assetsPath: {
       $resolve: async (val, get) => val ?? (await get('buildAssetsDir'))
+    },
+    /**
+     * Set default configuration for `<head>` on every page.
+     * @example
+     * ```js
+     * app: {
+     *   head: {
+     *     meta: [
+     *       // <meta name="viewport" content="width=device-width, initial-scale=1">
+     *       { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+     *     ],
+     *     script: [
+     *       // <script src="https://myawesome-lib.js"></script>
+     *       { src: 'https://awesome-lib.js' }
+     *     ],
+     *     link: [
+     *       // <link rel="stylesheet" href="https://myawesome-lib.css">
+     *       { rel: 'stylesheet', href: 'https://awesome-lib.css' }
+     *     ],
+     *     // please note that this is an area that is likely to change
+     *     style: [
+     *       // <style type="text/css">:root { color: red }</style>
+     *       { children: ':root { color: red }', type: 'text/css' }
+     *     ],
+     *     noscript: [
+     *       // <noscript>JavaScript is required</noscript>
+     *       { children: 'JavaScript is required' }
+     *     ]
+     *   }
+     * }
+     * ```
+     * @type {typeof import('../src/types/head').AppHeadMetaObject}
+     */
+    head: {
+      $resolve: async (val, get) => {
+        const resolved: Required<AppHeadMetaObject> = defu(val, await get('meta'), {
+          meta: [],
+          link: [],
+          style: [],
+          script: [],
+          noscript: []
+        })
+
+        // 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)
+        resolved.noscript = resolved.noscript.filter(Boolean)
+
+        return resolved
+      }
     }
   },
 
   /**
    * The path to an HTML template file for rendering Nuxt responses.
    * Uses `<srcDir>/app.html` if it exists, or the Nuxt's default template if not.
-   *
    * @example
    * ```html
    * <!DOCTYPE html>
@@ -75,7 +132,6 @@ export default defineUntypedSchema({
 
   /**
    * Options to pass directly to `vue-meta`.
-   *
    * @see [documentation](https://vue-meta.nuxtjs.org/api/#plugin-options).
    * @type {typeof import('vue-meta').VueMetaOptions}
    */
@@ -83,7 +139,6 @@ export default defineUntypedSchema({
 
   /**
    * Set default configuration for `<head>` on every page.
-   *
    * @see [documentation](https://vue-meta.nuxtjs.org/api/#metainfo-properties) for specifics.
    * @type {typeof import('vue-meta').MetaInfo}
    */
@@ -123,7 +178,6 @@ export default defineUntypedSchema({
    * You may want to extend plugins or change their order. For this, you can pass
    * a function using `extendPlugins`. It accepts an array of plugin objects and
    * should return an array of plugin objects.
-   *
    * @type {(plugins: Array<{ src: string, mode?: 'client' | 'server' }>) => Array<{ src: string, mode?: 'client' | 'server' }>}
    */
   extendPlugins: null,
@@ -132,7 +186,6 @@ export default defineUntypedSchema({
    * An object where each key name maps to a path to a layout .vue file.
    *
    * Normally, there is no need to configure this directly.
-   *
    * @type {Record<string, string>}
    */
   layouts: {},
@@ -141,7 +194,6 @@ export default defineUntypedSchema({
    * Set a custom error page layout.
    *
    * Normally, there is no need to configure this directly.
-   *
    * @type {string}
    */
   ErrorPage: null,
@@ -206,7 +258,6 @@ export default defineUntypedSchema({
    *
    * You can either pass a string (the transition name) or an object with properties to bind
    * to the `<Transition>` component that will wrap your pages.
-   *
    * @see [vue@2 documentation](https://v2.vuejs.org/v2/guide/transitions.html)
    * @see [vue@3 documentation](https://vuejs.org/guide/built-ins/transition-group.html#enter-leave-transitions)
    */
@@ -229,7 +280,6 @@ export default defineUntypedSchema({
    *
    * You can either pass a string (the transition name) or an object with properties to bind
    * to the `<Transition>` component that will wrap your layouts.
-   *
    * @see [vue@2 documentation](https://v2.vuejs.org/v2/guide/transitions.html)
    */
   layoutTransition: {
diff --git a/packages/bridge-schema/src/types/head.ts b/packages/bridge-schema/src/types/head.ts
new file mode 100644
index 000000000..70f54cf04
--- /dev/null
+++ b/packages/bridge-schema/src/types/head.ts
@@ -0,0 +1,31 @@
+import type { Head, MergeHead } from '@unhead/schema'
+
+/** @deprecated Extend types from `@unhead/schema` directly. This may be removed in a future minor version. */
+export interface HeadAugmentations extends MergeHead {
+  // runtime type modifications
+  base?: {}
+  link?: {}
+  meta?: {}
+  style?: {}
+  script?: {}
+  noscript?: {}
+  htmlAttrs?: {}
+  bodyAttrs?: {}
+}
+
+export type MetaObjectRaw = Head<HeadAugmentations>
+export type MetaObject = MetaObjectRaw
+
+export type AppHeadMetaObject = MetaObjectRaw & {
+  /**
+   * 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
+}
diff --git a/packages/bridge/package.json b/packages/bridge/package.json
index 1474d946e..03d929ed6 100644
--- a/packages/bridge/package.json
+++ b/packages/bridge/package.json
@@ -80,7 +80,6 @@
     "@types/fs-extra": "^9.0.13",
     "@types/hash-sum": "^1.0.0",
     "@types/node-fetch": "^3.0.2",
-    "@vueuse/head": "^1.1.26",
     "nuxt": "^2.16.2",
     "unbuild": "1.2.1",
     "vue": "^2.7.14",
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 09438d2ff..a318b27de 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -6,7 +6,6 @@ global.__NUXT_PREPATHS__ = (global.__NUXT_PREPATHS__ || []).concat(__dirname)
 
 export default defineNuxtConfig({
   app: {
-    // @ts-ignore TODO: add types
     head: {
       meta: [
         { name: 'viewport', content: 'width=1024, initial-scale=1' },
diff --git a/playground/package.json b/playground/package.json
index afdca1f2b..7a244a537 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -10,7 +10,6 @@
   },
   "devDependencies": {
     "@nuxt/bridge": "latest",
-    "@vueuse/head": "^1.1.26",
     "nuxt": "^2.16.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a72ae6968..1d8f39de4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -211,9 +211,6 @@ importers:
       '@types/node-fetch':
         specifier: ^3.0.2
         version: 3.0.2
-      '@vueuse/head':
-        specifier: ^1.1.26
-        version: 1.1.26(vue@2.7.14)
       nuxt:
         specifier: ^2.16.2
         version: 2.16.2(consola@3.1.0)(typescript@5.0.4)(vue@2.7.14)
@@ -275,24 +272,21 @@ importers:
       '@types/semver':
         specifier: ^7.5.0
         version: 7.5.0
-      '@vueuse/head':
-        specifier: ^1.1.26
-        version: 1.1.26(vue@2.7.14)
+      '@unhead/schema':
+        specifier: ^1.1.27
+        version: 1.1.27
       nitropack:
         specifier: ^2.4.1
         version: 2.4.1
       vite:
         specifier: ~4.3.9
-        version: 4.3.9(@types/node@18.11.18)
+        version: 4.3.9(terser@5.17.7)
 
   playground:
     devDependencies:
       '@nuxt/bridge':
         specifier: workspace:*
         version: link:../packages/bridge
-      '@vueuse/head':
-        specifier: ^1.1.26
-        version: 1.1.26(vue@2.7.14)
       nuxt:
         specifier: ^2.16.2
         version: 2.16.2(consola@3.1.0)(typescript@5.0.4)(vue@2.7.14)
@@ -2645,32 +2639,6 @@ packages:
       ufo: 1.1.2
     dev: true
 
-  /@nuxt/kit@3.5.3:
-    resolution: {integrity: sha512-QzoOGqa1zjKQfg7Y50TrrFAL9DhtIpYYs10gihcM1ISPrn9ROht+VEjqsaMvT+L8JuQbNf8wDYl8qzsdWGU29Q==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-    dependencies:
-      '@nuxt/schema': 3.5.3
-      c12: 1.4.1
-      consola: 3.1.0
-      defu: 6.1.2
-      globby: 13.1.4
-      hash-sum: 2.0.0
-      ignore: 5.2.4
-      jiti: 1.18.2
-      knitwork: 1.0.0
-      mlly: 1.3.0
-      pathe: 1.1.1
-      pkg-types: 1.0.3
-      scule: 1.0.0
-      semver: 7.5.1
-      unctx: 2.3.1
-      unimport: 3.0.7(rollup@3.22.0)
-      untyped: 1.3.2
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
   /@nuxt/kit@3.5.3(rollup@3.21.5):
     resolution: {integrity: sha512-QzoOGqa1zjKQfg7Y50TrrFAL9DhtIpYYs10gihcM1ISPrn9ROht+VEjqsaMvT+L8JuQbNf8wDYl8qzsdWGU29Q==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -2695,7 +2663,6 @@ packages:
     transitivePeerDependencies:
       - rollup
       - supports-color
-    dev: false
 
   /@nuxt/loading-screen@2.0.4:
     resolution: {integrity: sha512-xpEDAoRu75tLUYCkUJCIvJkWJSuwr8pqomvQ+fkXpSrkxZ/9OzlBFjAbVdOAWTMj4aV/LVQso4vcEdircKeFIQ==}
@@ -2736,24 +2703,6 @@ packages:
       - webpack
     dev: false
 
-  /@nuxt/schema@3.5.3:
-    resolution: {integrity: sha512-Tnon4mYfJZmsCtx4NZ9A+qjwo4DcZ6tERpEhYBY81PX7AiJ+hFPBFR1qR32Tff66/qJjZg5UXj6H9AdzwEYr2w==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-    dependencies:
-      defu: 6.1.2
-      hookable: 5.5.3
-      pathe: 1.1.1
-      pkg-types: 1.0.3
-      postcss-import-resolver: 2.0.0
-      std-env: 3.3.3
-      ufo: 1.1.2
-      unimport: 3.0.7(rollup@3.22.0)
-      untyped: 1.3.2
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    dev: true
-
   /@nuxt/schema@3.5.3(rollup@3.21.5):
     resolution: {integrity: sha512-Tnon4mYfJZmsCtx4NZ9A+qjwo4DcZ6tERpEhYBY81PX7AiJ+hFPBFR1qR32Tff66/qJjZg5UXj6H9AdzwEYr2w==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -2770,7 +2719,6 @@ packages:
     transitivePeerDependencies:
       - rollup
       - supports-color
-    dev: false
 
   /@nuxt/server@2.16.2:
     resolution: {integrity: sha512-9DW21SL1vXNIYH6beM1lsjHgocJdUAcGXCq29xqyFTieYlU+zxxMA3xT2aeKKekYEWTgYWt1E9got+bEbvLntg==}
@@ -2838,8 +2786,8 @@ packages:
       vitest:
         optional: true
     dependencies:
-      '@nuxt/kit': 3.5.3
-      '@nuxt/schema': 3.5.3
+      '@nuxt/kit': 3.5.3(rollup@3.21.5)
+      '@nuxt/schema': 3.5.3(rollup@3.21.5)
       consola: 3.1.0
       defu: 6.1.2
       execa: 7.1.1
@@ -3716,25 +3664,12 @@ packages:
       eslint-visitor-keys: 3.4.1
     dev: true
 
-  /@unhead/dom@1.1.26:
-    resolution: {integrity: sha512-6I8z170OAO19h/AslASN4Xw0hqItQFMKhRJQtplQs1BZ62LsDmNKuqJiYueX39U+IfIvIV3j/q1mQwt9lgMwTw==}
-    dependencies:
-      '@unhead/schema': 1.1.26
-      '@unhead/shared': 1.1.26
-    dev: true
-
   /@unhead/dom@1.1.27:
     resolution: {integrity: sha512-sUrzpKIVvFp8TFx1mgp5t0k5ts1+KmgjMgRRuvRTZMBMVeGQRLSuL3uo34iwuFmKxeI6BXT5lVBk5H02c1XdGg==}
     dependencies:
       '@unhead/schema': 1.1.27
       '@unhead/shared': 1.1.27
-
-  /@unhead/schema@1.1.26:
-    resolution: {integrity: sha512-l93zaizm+pu36uMssdtzSC2Y61ncZaBBouZn0pB8rVI14V0hPxeXuSNIuPh2WjAm8wfb8EnCSE3LNguoqTar7g==}
-    dependencies:
-      hookable: 5.5.3
-      zhead: 2.0.4
-    dev: true
+    dev: false
 
   /@unhead/schema@1.1.27:
     resolution: {integrity: sha512-S+xhPoBxBXDrsW9ltcF9Cv3cntMbSx+dfSmE7RNyDhogqHd3+lDEV2dnQpHKWTGjujwwMCALV5SADunAn785bw==}
@@ -3742,22 +3677,18 @@ packages:
       hookable: 5.5.3
       zhead: 2.0.4
 
-  /@unhead/shared@1.1.26:
-    resolution: {integrity: sha512-gnUfNrl8w7hQHke9P0au7klcG9bHVOXqbDvya2uARA/8TyxNz87i0uakraO+P6/+zf484dw3b3MYkXq0thK2eg==}
-    dependencies:
-      '@unhead/schema': 1.1.26
-    dev: true
-
   /@unhead/shared@1.1.27:
     resolution: {integrity: sha512-ElZ5WcMnhVlg44OAwTNq4XBkNePcL/BHZk7WKFcqpeGTJrEvSfs40lGJoo4sMsgDAd+XQdhJDd4dJu48jQB3kg==}
     dependencies:
       '@unhead/schema': 1.1.27
+    dev: false
 
   /@unhead/ssr@1.1.27:
     resolution: {integrity: sha512-lKXH2ofs8L+yAbHgkRP17bIQ45XaG2RSl5UCMsSIW2Ev4kiTGPbbcQKOBgsi2uEllgdMk5peKDyaWD9xheYlEA==}
     dependencies:
       '@unhead/schema': 1.1.27
       '@unhead/shared': 1.1.27
+    dev: false
 
   /@unhead/vue@1.1.27(vue@2.7.14):
     resolution: {integrity: sha512-ibe7/QW4ZtyCI/et/fI3CnwC+oxqp+7LrhmuLUS93ib1Sl70D51dcAy9eAvh0MG7wWUyMUrf3T95MRifJo7uzA==}
@@ -3769,6 +3700,7 @@ packages:
       hookable: 5.5.3
       unhead: 1.1.27
       vue: 2.7.14
+    dev: false
 
   /@vercel/nft@0.22.6:
     resolution: {integrity: sha512-gTsFnnT4mGxodr4AUlW3/urY+8JKKB452LwF3m477RFUJTAaDmcz2JqFuInzvdybYIeyIv1sSONEJxsxnbQ5JQ==}
@@ -4119,18 +4051,6 @@ packages:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
     dev: true
 
-  /@vueuse/head@1.1.26(vue@2.7.14):
-    resolution: {integrity: sha512-VUrqvcxKtxt2moKtUa7R/KscnDsNYj5u7HFULLsr84VhWsztzBedxW/8Wh/kTz2+/eMf5gC1KtkZBTFQYOmauQ==}
-    peerDependencies:
-      vue: '>=2.7 || >=3'
-    dependencies:
-      '@unhead/dom': 1.1.26
-      '@unhead/schema': 1.1.26
-      '@unhead/ssr': 1.1.27
-      '@unhead/vue': 1.1.27(vue@2.7.14)
-      vue: 2.7.14
-    dev: true
-
   /@webassemblyjs/ast@1.9.0:
     resolution: {integrity: sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==}
     dependencies:
@@ -11483,6 +11403,7 @@ packages:
       '@unhead/schema': 1.1.27
       '@unhead/shared': 1.1.27
       hookable: 5.5.3
+    dev: false
 
   /unicode-canonical-property-names-ecmascript@2.0.0:
     resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}
@@ -11519,7 +11440,6 @@ packages:
       unplugin: 1.3.1
     transitivePeerDependencies:
       - rollup
-    dev: false
 
   /unimport@3.0.7(rollup@3.22.0):
     resolution: {integrity: sha512-2dVQUxJEGcrSZ0U4qtwJVODrlfyGcwmIOoHVqbAFFUx7kPoEN5JWr1cZFhLwoAwTmZOvqAm3YIkzv1engIQocg==}
@@ -11832,7 +11752,6 @@ packages:
       terser: 5.17.7
     optionalDependencies:
       fsevents: 2.3.2
-    dev: false
 
   /vitest@0.31.4:
     resolution: {integrity: sha512-GoV0VQPmWrUFOZSg3RpQAPN+LPmHg2/gxlMNJlyxJihkz6qReHDV6b0pPDcqFLNEPya4tWJ1pgwUNP9MLmUfvQ==}

From 54b3c413585d6c057a7374aa4ded9c165dff3f12 Mon Sep 17 00:00:00 2001
From: wattanx <wattan.dev@gmail.com>
Date: Thu, 15 Jun 2023 09:52:49 +0900
Subject: [PATCH 6/8] Update pnpm-lock.yaml

---
 pnpm-lock.yaml | 54 +++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1fac7a652..44726d203 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -280,7 +280,7 @@ importers:
         version: 2.4.1
       vite:
         specifier: ~4.3.9
-        version: 4.3.9(terser@5.17.7)
+        version: 4.3.9(@types/node@18.11.18)
 
   playground:
     devDependencies:
@@ -3816,6 +3816,32 @@ packages:
       ufo: 1.1.2
     dev: true
 
+  /@nuxt/kit@3.5.3:
+    resolution: {integrity: sha512-QzoOGqa1zjKQfg7Y50TrrFAL9DhtIpYYs10gihcM1ISPrn9ROht+VEjqsaMvT+L8JuQbNf8wDYl8qzsdWGU29Q==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+    dependencies:
+      '@nuxt/schema': 3.5.3
+      c12: 1.4.1
+      consola: 3.1.0
+      defu: 6.1.2
+      globby: 13.1.4
+      hash-sum: 2.0.0
+      ignore: 5.2.4
+      jiti: 1.18.2
+      knitwork: 1.0.0
+      mlly: 1.3.0
+      pathe: 1.1.1
+      pkg-types: 1.0.3
+      scule: 1.0.0
+      semver: 7.5.1
+      unctx: 2.3.1
+      unimport: 3.0.8(rollup@3.22.0)
+      untyped: 1.3.2
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
   /@nuxt/kit@3.5.3(rollup@3.21.5):
     resolution: {integrity: sha512-QzoOGqa1zjKQfg7Y50TrrFAL9DhtIpYYs10gihcM1ISPrn9ROht+VEjqsaMvT+L8JuQbNf8wDYl8qzsdWGU29Q==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -3840,6 +3866,7 @@ packages:
     transitivePeerDependencies:
       - rollup
       - supports-color
+    dev: false
 
   /@nuxt/loading-screen@2.0.4:
     resolution: {integrity: sha512-xpEDAoRu75tLUYCkUJCIvJkWJSuwr8pqomvQ+fkXpSrkxZ/9OzlBFjAbVdOAWTMj4aV/LVQso4vcEdircKeFIQ==}
@@ -3880,6 +3907,24 @@ packages:
       - webpack
     dev: false
 
+  /@nuxt/schema@3.5.3:
+    resolution: {integrity: sha512-Tnon4mYfJZmsCtx4NZ9A+qjwo4DcZ6tERpEhYBY81PX7AiJ+hFPBFR1qR32Tff66/qJjZg5UXj6H9AdzwEYr2w==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+    dependencies:
+      defu: 6.1.2
+      hookable: 5.5.3
+      pathe: 1.1.1
+      pkg-types: 1.0.3
+      postcss-import-resolver: 2.0.0
+      std-env: 3.3.3
+      ufo: 1.1.2
+      unimport: 3.0.8(rollup@3.22.0)
+      untyped: 1.3.2
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
   /@nuxt/schema@3.5.3(rollup@3.21.5):
     resolution: {integrity: sha512-Tnon4mYfJZmsCtx4NZ9A+qjwo4DcZ6tERpEhYBY81PX7AiJ+hFPBFR1qR32Tff66/qJjZg5UXj6H9AdzwEYr2w==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -3896,6 +3941,7 @@ packages:
     transitivePeerDependencies:
       - rollup
       - supports-color
+    dev: false
 
   /@nuxt/server@2.17.0:
     resolution: {integrity: sha512-qe7RbxOna8EvccCbymc8Q8et6mFmOlyPVyxfvfblz5vzm55Lu8rlp3g7VRQTr62gS/x5lh+HtOynYrv56JxX/A==}
@@ -3963,8 +4009,8 @@ packages:
       vitest:
         optional: true
     dependencies:
-      '@nuxt/kit': 3.5.3(rollup@3.21.5)
-      '@nuxt/schema': 3.5.3(rollup@3.21.5)
+      '@nuxt/kit': 3.5.3
+      '@nuxt/schema': 3.5.3
       consola: 3.1.0
       defu: 6.1.2
       execa: 7.1.1
@@ -13016,6 +13062,7 @@ packages:
       unplugin: 1.3.1
     transitivePeerDependencies:
       - rollup
+    dev: false
 
   /unimport@3.0.8(rollup@3.22.0):
     resolution: {integrity: sha512-AOt6xj3QMwqcTZRPB+NhFkyVEjCKnpTVoPm5x6424zz2NYYtCfym2bpJofzPHIJKPNIh5ko2/t2q46ZIMgdmbw==}
@@ -13328,6 +13375,7 @@ packages:
       terser: 5.18.0
     optionalDependencies:
       fsevents: 2.3.2
+    dev: false
 
   /vitest@0.32.0:
     resolution: {integrity: sha512-SW83o629gCqnV3BqBnTxhB10DAwzwEx3z+rqYZESehUB+eWsJxwcBQx7CKy0otuGMJTYh7qCVuUX23HkftGl/Q==}

From 96eef653e8db4110a296bc192054f4f694bd5805 Mon Sep 17 00:00:00 2001
From: wattanx <wattan.dev@gmail.com>
Date: Tue, 20 Jun 2023 18:25:59 +0900
Subject: [PATCH 7/8] fix: remove pausing / unpausing feature

---
 .../bridge/src/runtime/head/plugins/unhead.ts    | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/packages/bridge/src/runtime/head/plugins/unhead.ts b/packages/bridge/src/runtime/head/plugins/unhead.ts
index 0938fe2fa..87a312031 100644
--- a/packages/bridge/src/runtime/head/plugins/unhead.ts
+++ b/packages/bridge/src/runtime/head/plugins/unhead.ts
@@ -13,22 +13,6 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(Vue2ProvideUnheadPlugin, head)
   nuxtApp.vueApp.use(head)
 
-  if (process.client) {
-    // pause dom updates until page is ready and between page transitions
-    let pauseDOMUpdates = true
-    const unpauseDom = () => {
-      pauseDOMUpdates = false
-      // trigger the debounced DOM update
-      head.hooks.callHook('entries:updated', head)
-    }
-
-    head.hooks.hook('dom:beforeRender', (context) => { context.shouldRender = !pauseDOMUpdates })
-
-    nuxtApp.hooks.hook('render:before', () => { pauseDOMUpdates = true })
-    // wait for new page before unpausing dom updates
-    nuxtApp.hooks.hook('render:done', unpauseDom)
-  }
-
   if (process.server) {
       nuxtApp.ssrContext!.renderMeta = async () => {
         const meta = await renderSSRHead(head)

From 12bad6b84bb4e2802245b7b03e9bd4d5825f74a0 Mon Sep 17 00:00:00 2001
From: wattanx <wattan.dev@gmail.com>
Date: Tue, 20 Jun 2023 22:21:44 +0900
Subject: [PATCH 8/8] fix: add async title cases

---
 playground/pages/head-script-setup.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/playground/pages/head-script-setup.vue b/playground/pages/head-script-setup.vue
index 75ab7d38d..c6b684273 100644
--- a/playground/pages/head-script-setup.vue
+++ b/playground/pages/head-script-setup.vue
@@ -18,8 +18,14 @@ useServerHead({
   ]
 })
 
+const data = new Promise<string>((resolve) => {
+  setTimeout(() => {
+    resolve('head script setup')
+  }, 500)
+})
+
 useHead({
-  title: 'head script setup',
+  title: data,
   titleTemplate: '%s %separator %site.name',
   templateParams: {
     separator: () => '-',