Use unhead vue instead of the base package

Author: RobertBoes

package-lock.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"

playgrounds/vue3/package.json

@@ -1,19 +1,22 @@
 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) => {
     const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
     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)
   },
 })

playgrounds/vue3/resources/js/app.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)
     },
   }),
 )