From bd85ddaa2ebe9b02c08b8b0fd4e07b87b52be236 Mon Sep 17 00:00:00 2001
From: Robert Boes <2871897+RobertBoes@users.noreply.github.com>
Date: Sun, 21 Jul 2024 00:01:52 +0200
Subject: [PATCH 1/3] Implement unhead for Vue 3 and its playground

---
 package-lock.json                             |  81 +++++++++-
 packages/core/package.json                    |   4 +-
 packages/core/src/head.ts                     | 147 ------------------
 packages/core/src/index.ts                    |   4 +-
 packages/core/src/types.ts                    |   7 +-
 packages/vue3/src/app.ts                      |  21 +--
 packages/vue3/src/createInertiaApp.ts         |  17 +-
 packages/vue3/src/head.ts                     | 132 ----------------
 packages/vue3/src/index.ts                    |   1 -
 packages/vue3/src/types.ts                    |   3 +-
 playgrounds/vue3/package.json                 |   1 +
 .../vue3/resources/js/Pages/Article.vue       |   6 +-
 playgrounds/vue3/resources/js/Pages/Form.vue  |   7 +-
 playgrounds/vue3/resources/js/Pages/Home.vue  |  13 +-
 playgrounds/vue3/resources/js/Pages/Login.vue |   6 +-
 playgrounds/vue3/resources/js/Pages/User.vue  |   6 +-
 playgrounds/vue3/resources/js/Pages/Users.vue |   6 +-
 playgrounds/vue3/resources/js/app.ts          |   6 +-
 playgrounds/vue3/resources/js/ssr.ts          |   8 +-
 19 files changed, 147 insertions(+), 329 deletions(-)
 delete mode 100644 packages/core/src/head.ts
 delete mode 100644 packages/vue3/src/head.ts

diff --git a/package-lock.json b/package-lock.json
index 1fd9eaf1f..cc4e4cfd6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1252,6 +1252,53 @@
       "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
       "dev": true
     },
+    "node_modules/@unhead/dom": {
+      "version": "1.9.16",
+      "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.9.16.tgz",
+      "integrity": "sha512-aZIAnnc89Csi1vV4mtlHYI765B7m1yuaXUuQiYHwr6glE9FLyy2X87CzEci4yPH/YbkKm0bGQRfcxXq6Eq0W7g==",
+      "dependencies": {
+        "@unhead/schema": "1.9.16",
+        "@unhead/shared": "1.9.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/schema": {
+      "version": "1.9.16",
+      "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.9.16.tgz",
+      "integrity": "sha512-V2BshX+I6D2wN4ys5so8RQDUgsggsxW9FVBiuQi4h8oPWtHclogxzDiHa5BH2TgvNIoUxLnLYNAShMGipmVuUw==",
+      "dependencies": {
+        "hookable": "^5.5.3",
+        "zhead": "^2.2.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/shared": {
+      "version": "1.9.16",
+      "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.9.16.tgz",
+      "integrity": "sha512-pfJnArULCY+GBr7OtYyyxihRiQLkT31TpyK6nUKIwyax4oNOGyhNfk0RFzNq16BwLg60d1lrc5bd5mZGbfClMA==",
+      "dependencies": {
+        "@unhead/schema": "1.9.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/ssr": {
+      "version": "1.9.16",
+      "resolved": "https://registry.npmjs.org/@unhead/ssr/-/ssr-1.9.16.tgz",
+      "integrity": "sha512-8R1qt4VAemX4Iun/l7DnUBJqmxA/KaUSc2+/hRYPJYOopXdCWkoaxC1K1ROX2vbRF7qmjdU5ik/a27kSPN94gg==",
+      "dependencies": {
+        "@unhead/schema": "1.9.16",
+        "@unhead/shared": "1.9.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-3.1.0.tgz",
@@ -2471,6 +2518,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
+    },
     "node_modules/ignore-walk": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-5.0.1.tgz",
@@ -4408,6 +4460,20 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/unhead": {
+      "version": "1.9.16",
+      "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.9.16.tgz",
+      "integrity": "sha512-FOoXkuRNDwt7PUaNE0LXNCb6RCz4vTpkGymz4tJ8rcaG5uUJ0lxGK536hzCFwFw3Xkp3n+tkt2yCcbAZE/FOvA==",
+      "dependencies": {
+        "@unhead/dom": "1.9.16",
+        "@unhead/schema": "1.9.16",
+        "@unhead/shared": "1.9.16",
+        "hookable": "^5.5.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
@@ -5312,15 +5378,25 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zhead": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.2.4.tgz",
+      "integrity": "sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==",
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
     "packages/core": {
       "name": "@inertiajs/core",
       "version": "1.2.0",
       "license": "MIT",
       "dependencies": {
+        "@unhead/ssr": "^1.9.16",
         "axios": "^1.6.0",
         "deepmerge": "^4.0.0",
         "nprogress": "^0.2.0",
-        "qs": "^6.9.0"
+        "qs": "^6.9.0",
+        "unhead": "^1.9.16"
       },
       "devDependencies": {
         "@types/deepmerge": "^2.2.0",
@@ -6170,9 +6246,10 @@
         "postcss": "^8.4.31",
         "tailwindcss": "^3.2.4",
         "typescript": "^4.9.4",
+        "unhead": "^1.9.16",
         "vite": "^4.5.3",
         "vue": "^3.3.4",
-        "vue-tsc": "^2.0.22"
+        "vue-tsc": "^2.0.0"
       }
     },
     "playgrounds/vue3/node_modules/@vitejs/plugin-vue": {
diff --git a/packages/core/package.json b/packages/core/package.json
index 5b684f74d..d80a7ec37 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -50,10 +50,12 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@unhead/ssr": "^1.9.16",
     "axios": "^1.6.0",
     "deepmerge": "^4.0.0",
     "nprogress": "^0.2.0",
-    "qs": "^6.9.0"
+    "qs": "^6.9.0",
+    "unhead": "^1.9.16"
   },
   "devDependencies": {
     "@types/deepmerge": "^2.2.0",
diff --git a/packages/core/src/head.ts b/packages/core/src/head.ts
deleted file mode 100644
index 1cc90b575..000000000
--- a/packages/core/src/head.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-import debounce from './debounce'
-
-const Renderer = {
-  buildDOMElement(tag: string): ChildNode {
-    const template = document.createElement('template')
-    template.innerHTML = tag
-    const node = template.content.firstChild as Element
-
-    if (!tag.startsWith('<script ')) {
-      return node
-    }
-
-    const script = document.createElement('script')
-    script.innerHTML = node.innerHTML
-    node.getAttributeNames().forEach((name) => {
-      script.setAttribute(name, node.getAttribute(name) || '')
-    })
-
-    return script
-  },
-
-  isInertiaManagedElement(element: Element): boolean {
-    return element.nodeType === Node.ELEMENT_NODE && element.getAttribute('inertia') !== null
-  },
-
-  findMatchingElementIndex(element: Element, elements: Array<Element>): number {
-    const key = element.getAttribute('inertia')
-    if (key !== null) {
-      return elements.findIndex((element) => element.getAttribute('inertia') === key)
-    }
-
-    return -1
-  },
-
-  update: debounce(function (elements: Array<string>) {
-    const sourceElements = elements.map((element) => this.buildDOMElement(element))
-    const targetElements = Array.from(document.head.childNodes).filter((element) =>
-      this.isInertiaManagedElement(element as Element),
-    )
-
-    targetElements.forEach((targetElement) => {
-      const index = this.findMatchingElementIndex(targetElement as Element, sourceElements)
-      if (index === -1) {
-        targetElement?.parentNode?.removeChild(targetElement)
-        return
-      }
-
-      const sourceElement = sourceElements.splice(index, 1)[0]
-      if (sourceElement && !targetElement.isEqualNode(sourceElement)) {
-        targetElement?.parentNode?.replaceChild(sourceElement, targetElement)
-      }
-    })
-
-    sourceElements.forEach((element) => document.head.appendChild(element))
-  }, 1),
-}
-
-export default function createHeadManager(
-  isServer: boolean,
-  titleCallback: (title: string) => string,
-  onUpdate: (elements: string[]) => void,
-): {
-  forceUpdate: () => void
-  createProvider: () => {
-    update: (elements: string[]) => void
-    disconnect: () => void
-  }
-} {
-  const states: Record<string, Array<string>> = {}
-  let lastProviderId = 0
-
-  function connect(): string {
-    const id = (lastProviderId += 1)
-    states[id] = []
-    return id.toString()
-  }
-
-  function disconnect(id: string): void {
-    if (id === null || Object.keys(states).indexOf(id) === -1) {
-      return
-    }
-
-    delete states[id]
-    commit()
-  }
-
-  function update(id: string, elements: Array<string> = []): void {
-    if (id !== null && Object.keys(states).indexOf(id) > -1) {
-      states[id] = elements
-    }
-
-    commit()
-  }
-
-  function collect(): Array<string> {
-    const title = titleCallback('')
-
-    const defaults: Record<string, string> = {
-      ...(title ? { title: `<title inertia="">${title}</title>` } : {}),
-    }
-
-    const elements = Object.values(states)
-      .reduce((carry, elements) => carry.concat(elements), [])
-      .reduce((carry, element) => {
-        if (element.indexOf('<') === -1) {
-          return carry
-        }
-
-        if (element.indexOf('<title ') === 0) {
-          const title = element.match(/(<title [^>]+>)(.*?)(<\/title>)/)
-          carry.title = title ? `${title[1]}${titleCallback(title[2])}${title[3]}` : element
-          return carry
-        }
-
-        const match = element.match(/ inertia="[^"]+"/)
-        if (match) {
-          carry[match[0]] = element
-        } else {
-          carry[Object.keys(carry).length] = element
-        }
-
-        return carry
-      }, defaults)
-
-    return Object.values(elements)
-  }
-
-  function commit(): void {
-    isServer ? onUpdate(collect()) : Renderer.update(collect())
-  }
-
-  // By committing during initialization, we can guarantee that the default
-  // tags are set, as well as that they exist during SSR itself.
-  commit()
-
-  return {
-    forceUpdate: commit,
-    createProvider: function () {
-      const id = connect()
-
-      return {
-        update: (elements) => update(id, elements),
-        disconnect: () => disconnect(id),
-      }
-    },
-  }
-}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 20ecc958c..f80d7456e 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,6 +1,8 @@
 import { Router } from './router'
 
-export { default as createHeadManager } from './head'
+export { getActiveHead } from 'unhead'
+export { renderSSRHead } from '@unhead/ssr'
+export type { SSRHeadPayload } from '@unhead/ssr'
 export { default as setupProgress } from './progress'
 export { default as shouldIntercept } from './shouldIntercept'
 export * from './types'
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 1f77ddbdd..a851b73c1 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -1,4 +1,9 @@
 import { AxiosProgressEvent, AxiosResponse } from 'axios'
+import type { SSRHeadPayload } from '@unhead/ssr'
+
+export type { getActiveHead } from 'unhead'
+export type { renderSSRHead } from '@unhead/ssr'
+export type { SSRHeadPayload } from '@unhead/ssr'
 
 declare module 'axios' {
   export interface AxiosProgressEvent {
@@ -194,7 +199,7 @@ export type ActiveVisit = PendingVisit &
 export type VisitId = unknown
 export type Component = unknown
 
-export type InertiaAppResponse = Promise<{ head: string[]; body: string } | void>
+export type InertiaAppResponse = Promise<{ head: string[]; body: string, unhead: SSRHeadPayload } | void>
 
 declare global {
   interface DocumentEventMap {
diff --git a/packages/vue3/src/app.ts b/packages/vue3/src/app.ts
index dde3254c5..c485625ad 100755
--- a/packages/vue3/src/app.ts
+++ b/packages/vue3/src/app.ts
@@ -1,4 +1,4 @@
-import { createHeadManager, Page, PageProps, router } from '@inertiajs/core'
+import { Page, PageProps, router } from '@inertiajs/core'
 import {
   computed,
   DefineComponent,
@@ -19,8 +19,6 @@ export interface InertiaAppProps {
   initialPage: Page
   initialComponent?: object
   resolveComponent?: (name: string) => DefineComponent | Promise<DefineComponent>
-  titleCallback?: (title: string) => string
-  onHeadUpdate?: (elements: string[]) => void
 }
 
 export type InertiaApp = DefineComponent<InertiaAppProps>
@@ -29,7 +27,6 @@ const component = ref(null)
 const page = ref<Page<any>>(null)
 const layout = shallowRef(null)
 const key = ref(null)
-let headManager = null
 
 const App: InertiaApp = defineComponent({
   name: 'Inertia',
@@ -46,24 +43,13 @@ const App: InertiaApp = defineComponent({
       type: Function as PropType<(name: string) => DefineComponent | Promise<DefineComponent>>,
       required: false,
     },
-    titleCallback: {
-      type: Function as PropType<(title: string) => string>,
-      required: false,
-      default: (title) => title,
-    },
-    onHeadUpdate: {
-      type: Function as PropType<(elements: string[]) => void>,
-      required: false,
-      default: () => () => {},
-    },
   },
-  setup({ initialPage, initialComponent, resolveComponent, titleCallback, onHeadUpdate }) {
+  setup({ initialPage, initialComponent, resolveComponent }) {
     component.value = initialComponent ? markRaw(initialComponent) : null
     page.value = initialPage
     key.value = null
 
     const isServer = typeof window === 'undefined'
-    headManager = createHeadManager(isServer, titleCallback, onHeadUpdate)
 
     if (!isServer) {
       router.init({
@@ -75,8 +61,6 @@ const App: InertiaApp = defineComponent({
           key.value = args.preserveState ? key.value : Date.now()
         },
       })
-
-      router.on('navigate', () => headManager.forceUpdate())
     }
 
     return () => {
@@ -120,7 +104,6 @@ export const plugin: Plugin = {
 
     Object.defineProperty(app.config.globalProperties, '$inertia', { get: () => router })
     Object.defineProperty(app.config.globalProperties, '$page', { get: () => page.value })
-    Object.defineProperty(app.config.globalProperties, '$headManager', { get: () => headManager })
 
     app.mixin(remember)
   },
diff --git a/packages/vue3/src/createInertiaApp.ts b/packages/vue3/src/createInertiaApp.ts
index 8d69214eb..b47146482 100644
--- a/packages/vue3/src/createInertiaApp.ts
+++ b/packages/vue3/src/createInertiaApp.ts
@@ -1,4 +1,5 @@
-import { Page, setupProgress } from '@inertiajs/core'
+import { Page, setupProgress, renderSSRHead, getActiveHead } from '@inertiajs/core'
+import type { SSRHeadPayload } from '@inertiajs/core'
 import { DefineComponent, Plugin, App as VueApp, createSSRApp, h } from 'vue'
 import App, { InertiaApp, InertiaAppProps, plugin } from './app'
 
@@ -6,7 +7,6 @@ interface CreateInertiaAppProps {
   id?: string
   resolve: (name: string) => DefineComponent | Promise<DefineComponent> | { default: DefineComponent }
   setup: (props: { el: Element; App: InertiaApp; props: InertiaAppProps; plugin: Plugin }) => void | VueApp
-  title?: (title: string) => string
   progress?:
     | false
     | {
@@ -23,18 +23,15 @@ export default async function createInertiaApp({
   id = 'app',
   resolve,
   setup,
-  title,
   progress = {},
   page,
   render,
-}: CreateInertiaAppProps): Promise<{ head: string[]; body: string }> {
+}: CreateInertiaAppProps): Promise<{ head: string[]; body: string, unhead: SSRHeadPayload }> {
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
   const initialPage = page || JSON.parse(el.dataset.page)
   const resolveComponent = (name) => Promise.resolve(resolve(name)).then((module) => module.default || module)
 
-  let head = []
-
   const vueApp = await resolveComponent(initialPage.component).then((initialComponent) => {
     return setup({
       el,
@@ -43,8 +40,6 @@ export default async function createInertiaApp({
         initialPage,
         initialComponent,
         resolveComponent,
-        titleCallback: title,
-        onHeadUpdate: isServer ? (elements) => (head = elements) : null,
       },
       plugin,
     })
@@ -66,6 +61,10 @@ export default async function createInertiaApp({
       }),
     )
 
-    return { head, body }
+    const unhead = await renderSSRHead(getActiveHead())
+
+    const head = `${unhead.headTags}${unhead.bodyTagsOpen}${unhead.bodyTags}`.split('\n')
+
+    return { head, body, unhead }
   }
 }
diff --git a/packages/vue3/src/head.ts b/packages/vue3/src/head.ts
deleted file mode 100644
index 24a1b5340..000000000
--- a/packages/vue3/src/head.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import { defineComponent, DefineComponent } from 'vue'
-
-export type InertiaHead = DefineComponent<{
-  title?: string
-}>
-
-const Head: InertiaHead = defineComponent({
-  props: {
-    title: {
-      type: String,
-      required: false,
-    },
-  },
-  data() {
-    return {
-      provider: this.$headManager.createProvider(),
-    }
-  },
-  beforeUnmount() {
-    this.provider.disconnect()
-  },
-  methods: {
-    isUnaryTag(node) {
-      return (
-        [
-          'area',
-          'base',
-          'br',
-          'col',
-          'embed',
-          'hr',
-          'img',
-          'input',
-          'keygen',
-          'link',
-          'meta',
-          'param',
-          'source',
-          'track',
-          'wbr',
-        ].indexOf(node.type) > -1
-      )
-    },
-    renderTagStart(node) {
-      node.props = node.props || {}
-      node.props.inertia = node.props['head-key'] !== undefined ? node.props['head-key'] : ''
-      const attrs = Object.keys(node.props).reduce((carry, name) => {
-        const value = node.props[name]
-        if (['key', 'head-key'].includes(name)) {
-          return carry
-        } else if (value === '') {
-          return carry + ` ${name}`
-        } else {
-          return carry + ` ${name}="${value}"`
-        }
-      }, '')
-      return `<${node.type}${attrs}>`
-    },
-    renderTagChildren(node) {
-      return typeof node.children === 'string'
-        ? node.children
-        : node.children.reduce((html, child) => html + this.renderTag(child), '')
-    },
-    isFunctionNode(node) {
-      return typeof node.type === 'function'
-    },
-    isComponentNode(node) {
-      return typeof node.type === 'object'
-    },
-    isCommentNode(node) {
-      return /(comment|cmt)/i.test(node.type.toString())
-    },
-    isFragmentNode(node) {
-      return /(fragment|fgt|symbol\(\))/i.test(node.type.toString())
-    },
-    isTextNode(node) {
-      return /(text|txt)/i.test(node.type.toString())
-    },
-    renderTag(node) {
-      if (this.isTextNode(node)) {
-        return node.children
-      } else if (this.isFragmentNode(node)) {
-        return ''
-      } else if (this.isCommentNode(node)) {
-        return ''
-      }
-      let html = this.renderTagStart(node)
-      if (node.children) {
-        html += this.renderTagChildren(node)
-      }
-      if (!this.isUnaryTag(node)) {
-        html += `</${node.type}>`
-      }
-      return html
-    },
-    addTitleElement(elements) {
-      if (this.title && !elements.find((tag) => tag.startsWith('<title'))) {
-        elements.push(`<title inertia>${this.title}</title>`)
-      }
-      return elements
-    },
-    renderNodes(nodes) {
-      return this.addTitleElement(
-        nodes
-          .flatMap((node) => this.resolveNode(node))
-          .map((node) => this.renderTag(node))
-          .filter((node) => node),
-      )
-    },
-    resolveNode(node) {
-      if (this.isFunctionNode(node)) {
-        return this.resolveNode(node.type())
-      } else if (this.isComponentNode(node)) {
-        console.warn(`Using components in the <Head> component is not supported.`)
-        return []
-      } else if (this.isTextNode(node) && node.children) {
-        return node
-      } else if (this.isFragmentNode(node) && node.children) {
-        return node.children.flatMap((child) => this.resolveNode(child))
-      } else if (this.isCommentNode(node)) {
-        return []
-      } else {
-        return node
-      }
-    },
-  },
-  render() {
-    this.provider.update(this.renderNodes(this.$slots.default ? this.$slots.default() : []))
-  },
-})
-
-export default Head
diff --git a/packages/vue3/src/index.ts b/packages/vue3/src/index.ts
index 1bb8eac33..9909d78bb 100755
--- a/packages/vue3/src/index.ts
+++ b/packages/vue3/src/index.ts
@@ -1,7 +1,6 @@
 export { router } from '@inertiajs/core'
 export { usePage } from './app'
 export { default as createInertiaApp } from './createInertiaApp'
-export { default as Head } from './head'
 export { InertiaLinkProps, default as Link } from './link'
 export * from './types'
 export { InertiaForm, default as useForm } from './useForm'
diff --git a/packages/vue3/src/types.ts b/packages/vue3/src/types.ts
index f2fe2394e..f9d02ed00 100644
--- a/packages/vue3/src/types.ts
+++ b/packages/vue3/src/types.ts
@@ -1,4 +1,4 @@
-import { createHeadManager, Page, PageHandler, router } from '@inertiajs/core'
+import { Page, PageHandler, router } from '@inertiajs/core'
 import { ComponentPublicInstance } from 'vue'
 import useForm from './useForm'
 
@@ -16,7 +16,6 @@ declare module '@vue/runtime-core' {
   export interface ComponentCustomProperties {
     $inertia: typeof router
     $page: Page
-    $headManager: ReturnType<typeof createHeadManager>
   }
 
   export interface ComponentCustomOptions {
diff --git a/playgrounds/vue3/package.json b/playgrounds/vue3/package.json
index 8173bb4b7..3ed9e9d3b 100644
--- a/playgrounds/vue3/package.json
+++ b/playgrounds/vue3/package.json
@@ -17,6 +17,7 @@
     "postcss": "^8.4.31",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.4",
+    "unhead": "^1.9.16",
     "vite": "^4.5.3",
     "vue": "^3.3.4",
     "vue-tsc": "^2.0.0"
diff --git a/playgrounds/vue3/resources/js/Pages/Article.vue b/playgrounds/vue3/resources/js/Pages/Article.vue
index 618681ebf..844d64db9 100644
--- a/playgrounds/vue3/resources/js/Pages/Article.vue
+++ b/playgrounds/vue3/resources/js/Pages/Article.vue
@@ -4,11 +4,13 @@ export default { layout: Layout }
 </script>
 
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3'
+import { useHead } from 'unhead';
+useHead({
+    title: 'Article'
+})
 </script>
 
 <template>
-  <Head title="Article" />
   <h1 class="text-3xl">Article</h1>
   <article class="max-w-3xl">
     <p class="my-6">
diff --git a/playgrounds/vue3/resources/js/Pages/Form.vue b/playgrounds/vue3/resources/js/Pages/Form.vue
index 8dc9d00d1..0aa27859c 100644
--- a/playgrounds/vue3/resources/js/Pages/Form.vue
+++ b/playgrounds/vue3/resources/js/Pages/Form.vue
@@ -4,7 +4,11 @@ export default { layout: Layout }
 </script>
 
 <script setup lang="ts">
-import { Head, useForm } from '@inertiajs/vue3'
+import { useForm } from '@inertiajs/vue3';
+import { useHead } from 'unhead';
+useHead({
+    title: 'Form'
+})
 
 const form = useForm('NewUser', {
   name: '',
@@ -14,7 +18,6 @@ const form = useForm('NewUser', {
 </script>
 
 <template>
-  <Head title="Form" />
   <h1 class="text-3xl">Form</h1>
   <form @submit.prevent="form.post('/user')" class="mt-6 max-w-md space-y-4">
     <div v-if="form.isDirty" class="my-5 rounded border border-amber-100 bg-amber-50 p-3 text-amber-800">
diff --git a/playgrounds/vue3/resources/js/Pages/Home.vue b/playgrounds/vue3/resources/js/Pages/Home.vue
index 1b7559fbb..23c69d377 100644
--- a/playgrounds/vue3/resources/js/Pages/Home.vue
+++ b/playgrounds/vue3/resources/js/Pages/Home.vue
@@ -4,11 +4,20 @@ export default { layout: Layout }
 </script>
 
 <script setup lang="ts">
-import { Head, Link } from '@inertiajs/vue3'
+import { Link } from '@inertiajs/vue3'
+import { useHead } from 'unhead';
+useHead({
+    title: 'Home',
+    meta: [
+        {
+            name: 'description',
+            content: 'The Inertia Vue3 playground homepage',
+        },
+    ],
+})
 </script>
 
 <template>
-  <Head title="Home" />
   <h1 class="text-3xl">Home</h1>
   <p class="mt-6">
     <Link href="/article#far-down" class="text-blue-700 underline">Link to bottom of article page</Link>
diff --git a/playgrounds/vue3/resources/js/Pages/Login.vue b/playgrounds/vue3/resources/js/Pages/Login.vue
index a140e8e74..9bd98dd8e 100644
--- a/playgrounds/vue3/resources/js/Pages/Login.vue
+++ b/playgrounds/vue3/resources/js/Pages/Login.vue
@@ -4,11 +4,13 @@ export default { layout: Layout }
 </script>
 
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3'
+import { useHead } from 'unhead';
+useHead({
+    title: 'Login'
+})
 </script>
 
 <template>
-  <Head title="Login" />
   <h1 class="text-3xl">Login</h1>
   <p class="mt-6">You made a <code>POST</code> request to the logout endpoint and were redirected to the login page.</p>
 </template>
diff --git a/playgrounds/vue3/resources/js/Pages/User.vue b/playgrounds/vue3/resources/js/Pages/User.vue
index 1451fe19a..25a00cb9a 100644
--- a/playgrounds/vue3/resources/js/Pages/User.vue
+++ b/playgrounds/vue3/resources/js/Pages/User.vue
@@ -4,13 +4,15 @@ export default { layout: Layout }
 </script>
 
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3'
+import { useHead } from 'unhead';
+useHead({
+    title: 'User'
+})
 
 defineProps({ user: Object })
 </script>
 
 <template>
-  <Head title="User" />
   <h1 class="text-3xl">User</h1>
   <p class="mt-6">You successfully created a new user! Well not really, there is no persistence in this app.</p>
   <ul class="mt-6 space-y-2">
diff --git a/playgrounds/vue3/resources/js/Pages/Users.vue b/playgrounds/vue3/resources/js/Pages/Users.vue
index 50ffe792b..2f773ec7d 100644
--- a/playgrounds/vue3/resources/js/Pages/Users.vue
+++ b/playgrounds/vue3/resources/js/Pages/Users.vue
@@ -4,13 +4,15 @@ export default { layout: Layout }
 </script>
 
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3'
+import { useHead } from 'unhead';
+useHead({
+    title: 'Users'
+})
 
 defineProps({ users: Array })
 </script>
 
 <template>
-  <Head title="User" />
   <h1 class="text-3xl">Users</h1>
   <div class="mt-6 w-full max-w-2xl overflow-hidden rounded border shadow-sm">
     <table class="w-full text-left">
diff --git a/playgrounds/vue3/resources/js/app.ts b/playgrounds/vue3/resources/js/app.ts
index 7cdf11e32..dea858475 100644
--- a/playgrounds/vue3/resources/js/app.ts
+++ b/playgrounds/vue3/resources/js/app.ts
@@ -1,8 +1,12 @@
 import { createInertiaApp } from '@inertiajs/vue3'
 import { createSSRApp, h, type DefineComponent } from 'vue'
+import { useHead } from 'unhead'
+
+useHead({
+    titleTemplate: (title) => `${title} - Vue 3 Playground`,
+})
 
 createInertiaApp({
-  title: (title) => `${title} - Vue 3 Playground`,
   resolve: (name) => {
     const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
     return pages[`./Pages/${name}.vue`] as DefineComponent
diff --git a/playgrounds/vue3/resources/js/ssr.ts b/playgrounds/vue3/resources/js/ssr.ts
index d525f32de..ae7aa2110 100644
--- a/playgrounds/vue3/resources/js/ssr.ts
+++ b/playgrounds/vue3/resources/js/ssr.ts
@@ -2,12 +2,18 @@ import { createInertiaApp } from '@inertiajs/vue3'
 import createServer from '@inertiajs/vue3/server'
 import { renderToString } from '@vue/server-renderer'
 import { createSSRApp, h, type DefineComponent } from 'vue'
+import { createHead, useHead } from 'unhead'
+
+createHead()
+
+useHead({
+    titleTemplate: (title) => `${title} - Vue 3 Playground`,
+})
 
 createServer((page) =>
   createInertiaApp({
     page,
     render: renderToString,
-    title: (title) => `${title} - Vue 3 Playground`,
     resolve: (name) => {
       const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
       return pages[`./Pages/${name}.vue`] as DefineComponent

From 7556dbbc4d2fda7f104242da61e379eae2001a31 Mon Sep 17 00:00:00 2001
From: Robert Boes <2871897+RobertBoes@users.noreply.github.com>
Date: Sun, 21 Jul 2024 02:06:19 +0200
Subject: [PATCH 2/3] Use unhead vue instead of the base package

---
 package-lock.json                    | 21 ++++++++++++++++++++-
 playgrounds/vue3/package.json        |  2 +-
 playgrounds/vue3/resources/js/app.ts | 13 ++++++++-----
 playgrounds/vue3/resources/js/ssr.ts | 16 ++++++++--------
 4 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cc4e4cfd6..2dbb14f8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1299,6 +1299,24 @@
         "url": "https://github.com/sponsors/harlan-zw"
       }
     },
+    "node_modules/@unhead/vue": {
+      "version": "1.9.16",
+      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.9.16.tgz",
+      "integrity": "sha512-kpMWWwm8cOwo4gw4An43pz30l2CqNtmJpX5Xsu79rwf6Viq8jHAjk6BGqyKy220M2bpa0Va4fnR532SgGO1YgQ==",
+      "dev": true,
+      "dependencies": {
+        "@unhead/schema": "1.9.16",
+        "@unhead/shared": "1.9.16",
+        "hookable": "^5.5.3",
+        "unhead": "1.9.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      },
+      "peerDependencies": {
+        "vue": ">=2.7 || >=3"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-3.1.0.tgz",
@@ -5196,6 +5214,7 @@
       "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
       "dev": true,
       "optional": true,
+      "peer": true,
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -6236,6 +6255,7 @@
       "name": "@inertiajs/vue3-playground",
       "devDependencies": {
         "@inertiajs/vue3": "^1.0.0",
+        "@unhead/vue": "^1.9.16",
         "@vitejs/plugin-vue": "^4.0.0",
         "@volar/vue-typescript": "^1.0.22",
         "@vue/server-renderer": "^3.3.4",
@@ -6246,7 +6266,6 @@
         "postcss": "^8.4.31",
         "tailwindcss": "^3.2.4",
         "typescript": "^4.9.4",
-        "unhead": "^1.9.16",
         "vite": "^4.5.3",
         "vue": "^3.3.4",
         "vue-tsc": "^2.0.0"
diff --git a/playgrounds/vue3/package.json b/playgrounds/vue3/package.json
index 3ed9e9d3b..4b111e607 100644
--- a/playgrounds/vue3/package.json
+++ b/playgrounds/vue3/package.json
@@ -7,6 +7,7 @@
   },
   "devDependencies": {
     "@inertiajs/vue3": "^1.0.0",
+    "@unhead/vue": "^1.9.16",
     "@vitejs/plugin-vue": "^4.0.0",
     "@volar/vue-typescript": "^1.0.22",
     "@vue/server-renderer": "^3.3.4",
@@ -17,7 +18,6 @@
     "postcss": "^8.4.31",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.4",
-    "unhead": "^1.9.16",
     "vite": "^4.5.3",
     "vue": "^3.3.4",
     "vue-tsc": "^2.0.0"
diff --git a/playgrounds/vue3/resources/js/app.ts b/playgrounds/vue3/resources/js/app.ts
index dea858475..80bf7b967 100644
--- a/playgrounds/vue3/resources/js/app.ts
+++ b/playgrounds/vue3/resources/js/app.ts
@@ -1,10 +1,6 @@
 import { createInertiaApp } from '@inertiajs/vue3'
 import { createSSRApp, h, type DefineComponent } from 'vue'
-import { useHead } from 'unhead'
-
-useHead({
-    titleTemplate: (title) => `${title} - Vue 3 Playground`,
-})
+import { createHead, useHead } from '@unhead/vue'
 
 createInertiaApp({
   resolve: (name) => {
@@ -12,8 +8,15 @@ createInertiaApp({
     return pages[`./Pages/${name}.vue`] as DefineComponent
   },
   setup({ el, App, props, plugin }) {
+    const head = createHead()
+
+    useHead({
+        titleTemplate: (title) => `${title} - Vue 3 Playground`,
+    })
+
     createSSRApp({ render: () => h(App, props) })
       .use(plugin)
+      .use(head)
       .mount(el)
   },
 })
diff --git a/playgrounds/vue3/resources/js/ssr.ts b/playgrounds/vue3/resources/js/ssr.ts
index ae7aa2110..78011f0da 100644
--- a/playgrounds/vue3/resources/js/ssr.ts
+++ b/playgrounds/vue3/resources/js/ssr.ts
@@ -2,13 +2,7 @@ import { createInertiaApp } from '@inertiajs/vue3'
 import createServer from '@inertiajs/vue3/server'
 import { renderToString } from '@vue/server-renderer'
 import { createSSRApp, h, type DefineComponent } from 'vue'
-import { createHead, useHead } from 'unhead'
-
-createHead()
-
-useHead({
-    titleTemplate: (title) => `${title} - Vue 3 Playground`,
-})
+import { createHead, useHead } from '@unhead/vue'
 
 createServer((page) =>
   createInertiaApp({
@@ -19,9 +13,15 @@ createServer((page) =>
       return pages[`./Pages/${name}.vue`] as DefineComponent
     },
     setup({ App, props, plugin }) {
+      const head = createHead()
+
+      useHead({
+        titleTemplate: (title) => `${title} - Vue 3 Playground`,
+      })
+
       return createSSRApp({
         render: () => h(App, props),
-      }).use(plugin)
+      }).use(plugin).use(head)
     },
   }),
 )

From 3747a6d7b3fb6932b33b3dec844aa1d3e7bfc93b Mon Sep 17 00:00:00 2001
From: Robert Boes <2871897+RobertBoes@users.noreply.github.com>
Date: Sun, 21 Jul 2024 13:32:07 +0200
Subject: [PATCH 3/3] Fix vue3 head issues

---
 playgrounds/vue3/resources/js/Pages/Article.vue | 2 +-
 playgrounds/vue3/resources/js/Pages/Form.vue    | 2 +-
 playgrounds/vue3/resources/js/Pages/Home.vue    | 2 +-
 playgrounds/vue3/resources/js/Pages/Login.vue   | 2 +-
 playgrounds/vue3/resources/js/Pages/User.vue    | 2 +-
 playgrounds/vue3/resources/js/Pages/Users.vue   | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/playgrounds/vue3/resources/js/Pages/Article.vue b/playgrounds/vue3/resources/js/Pages/Article.vue
index 844d64db9..ae7aff3a8 100644
--- a/playgrounds/vue3/resources/js/Pages/Article.vue
+++ b/playgrounds/vue3/resources/js/Pages/Article.vue
@@ -4,7 +4,7 @@ export default { layout: Layout }
 </script>
 
 <script setup lang="ts">
-import { useHead } from 'unhead';
+import { useHead } from '@unhead/vue';
 useHead({
     title: 'Article'
 })
diff --git a/playgrounds/vue3/resources/js/Pages/Form.vue b/playgrounds/vue3/resources/js/Pages/Form.vue
index 0aa27859c..03b214fa2 100644
--- a/playgrounds/vue3/resources/js/Pages/Form.vue
+++ b/playgrounds/vue3/resources/js/Pages/Form.vue
@@ -5,7 +5,7 @@ export default { layout: Layout }
 
 <script setup lang="ts">
 import { useForm } from '@inertiajs/vue3';
-import { useHead } from 'unhead';
+import { useHead } from '@unhead/vue';
 useHead({
     title: 'Form'
 })
diff --git a/playgrounds/vue3/resources/js/Pages/Home.vue b/playgrounds/vue3/resources/js/Pages/Home.vue
index 23c69d377..cd53f2eda 100644
--- a/playgrounds/vue3/resources/js/Pages/Home.vue
+++ b/playgrounds/vue3/resources/js/Pages/Home.vue
@@ -5,7 +5,7 @@ export default { layout: Layout }
 
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3'
-import { useHead } from 'unhead';
+import { useHead } from '@unhead/vue';
 useHead({
     title: 'Home',
     meta: [
diff --git a/playgrounds/vue3/resources/js/Pages/Login.vue b/playgrounds/vue3/resources/js/Pages/Login.vue
index 9bd98dd8e..03b9a4d7b 100644
--- a/playgrounds/vue3/resources/js/Pages/Login.vue
+++ b/playgrounds/vue3/resources/js/Pages/Login.vue
@@ -4,7 +4,7 @@ export default { layout: Layout }
 </script>
 
 <script setup lang="ts">
-import { useHead } from 'unhead';
+import { useHead } from '@unhead/vue';
 useHead({
     title: 'Login'
 })
diff --git a/playgrounds/vue3/resources/js/Pages/User.vue b/playgrounds/vue3/resources/js/Pages/User.vue
index 25a00cb9a..89c714267 100644
--- a/playgrounds/vue3/resources/js/Pages/User.vue
+++ b/playgrounds/vue3/resources/js/Pages/User.vue
@@ -4,7 +4,7 @@ export default { layout: Layout }
 </script>
 
 <script setup lang="ts">
-import { useHead } from 'unhead';
+import { useHead } from '@unhead/vue';
 useHead({
     title: 'User'
 })
diff --git a/playgrounds/vue3/resources/js/Pages/Users.vue b/playgrounds/vue3/resources/js/Pages/Users.vue
index 2f773ec7d..6f71c7438 100644
--- a/playgrounds/vue3/resources/js/Pages/Users.vue
+++ b/playgrounds/vue3/resources/js/Pages/Users.vue
@@ -4,7 +4,7 @@ export default { layout: Layout }
 </script>
 
 <script setup lang="ts">
-import { useHead } from 'unhead';
+import { useHead } from '@unhead/vue';
 useHead({
     title: 'Users'
 })