feat: add support for unhead

.gitignore

@@ -7,4 +7,6 @@ dist-ssr
 _*
 
 **/worker/*
-pnpm-lock.yaml
+pnpm-lock.yaml
+.yarn
+.yarnrc.yml

README.md

@@ -422,10 +422,30 @@ Use your framework's utilities to handle head tags and attributes for html and b
 <details><summary>Vue Head</summary>
 <p>
 
-Install [`@vueuse/head`](https://github.com/vueuse/head) as follows:
+Install [`unhead`](https://github.com/unjs/unhead) as follows:
+
+```bash
+yarn add unhead @unhead/vue @unhead/ssr @unhead/addons
+```
+
+```js
+import { defineConfig } from 'vite'
+import viteSSR from 'vite-ssr/plugin'
+import UnheadVite from '@unhead/addons/vite'
+import Vue from '@vitejs/plugin-vue'
+
+export default defineConfig(
+  plugins: [
+    viteSSR(),
+    UnheadVite(),
+    Vue(),
+    // ...
+  ]
+)
+```
 
 ```js
-import { createHead } from '@vueuse/head'
+import { createHead } from '@unhead/vue'
 
 export default viteSSR(App, { routes }, ({ app }) => {
   const head = createHead()
@@ -435,7 +455,7 @@ export default viteSSR(App, { routes }, ({ app }) => {
 })
 
 // In your components:
-// import { useHead } from '@vueuse/head'
+// import { useHead } from '@unhead/vue'
 // ... useHead({ ... })
 ```
 

examples/vue/package.json

@@ -8,12 +8,18 @@
     "serve:node": "node ../node-server/index vue"
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/compiler-sfc": "^3.2.26",
-    "@vue/server-renderer": "^3.2.26",
-    "@vueuse/head": "^0.6.0",
-    "vite": "4.1.x",
-    "vue": "^3.2.26",
-    "vue-router": "^4.0.12"
+    "@unhead/addons": "^1.1.32",
+    "@unhead/ssr": "^1.1.32",
+    "@unhead/vue": "^1.1.32",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/server-renderer": "^3.3.4",
+    "unhead": "^1.1.32",
+    "vite": "^4.4.6",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4"
+  },
+  "devDependencies": {
+    "taze": "^0.11.2"
   }
 }

examples/vue/src/main.js

@@ -2,11 +2,14 @@ import './index.css'
 import App from './App.vue'
 import routes from './routes'
 import viteSSR, { ClientOnly } from 'vite-ssr'
-import { createHead } from '@vueuse/head'
+import { createHead } from '@unhead/vue'
 
 export default viteSSR(
   App,
-  { routes },
+  {
+    routes,
+    // debug: { mount: false },
+  },
   ({ app, router, isClient, url, initialState, initialRoute, request }) => {
     const head = createHead()
     app.use(head)

examples/vue/src/pages/Homepage.vue

@@ -9,7 +9,7 @@
 
 <script>
 import { defineComponent, inject, ref } from 'vue'
-import { useHead } from '@vueuse/head'
+import { useHead } from '@unhead/vue'
 import { useContext } from 'vite-ssr/vue'
 
 export default defineComponent({

examples/vue/vite.config.js

@@ -2,6 +2,7 @@ const { defineConfig } = require('vite')
 const viteSSR = require('vite-ssr/plugin')
 const vue = require('@vitejs/plugin-vue')
 const api = require('../node-server/api')
+const UnheadVite = require('@unhead/addons/vite')
 
 module.exports = defineConfig({
   server: {
@@ -13,6 +14,7 @@ module.exports = defineConfig({
   ssr: { format: 'cjs' },
   plugins: [
     viteSSR(),
+    UnheadVite(),
     vue(),
     {
       // Mock API during development

package.json

@@ -47,7 +47,10 @@
   "peerDependencies": {
     "@vitejs/plugin-react": "^3.0.0",
     "@vitejs/plugin-vue": "^4.0.0",
-    "@vueuse/head": "0.x",
+    "unhead": "^1.1.32",
+    "@unhead/addons": "^1.1.32",
+    "@unhead/ssr": "^1.1.32",
+    "@unhead/vue": "^1.1.32",
     "react": "^17",
     "react-dom": "^17",
     "react-helmet-async": "^1.0.0",
@@ -63,7 +66,16 @@
     "@vitejs/plugin-vue": {
       "optional": true
     },
-    "@vueuse/head": {
+    "unhead": {
+      "optional": true
+    },
+    "@unhead/addons": {
+      "optional": true
+    },
+    "@unhead/ssr": {
+      "optional": true
+    },
+    "@unhead/vue": {
       "optional": true
     },
     "vue": {
@@ -116,5 +128,6 @@
   },
   "gitHooks": {
     "commit-msg": "node scripts/verifyCommit.js"
-  }
+  },
+  "packageManager": "[email protected]"
 }

src/core/entry-server.ts

@@ -16,6 +16,8 @@ import type {
 
 const getEmptyHtmlParts = () => ({
   headTags: '',
+  bodyTags: '',
+  bodyTagsOpen: '',
   htmlAttrs: '',
   bodyAttrs: '',
   body: '',

src/core/types.ts

@@ -9,6 +9,8 @@ export interface Context extends SharedContext {}
 
 export interface SSRPageDescriptor {
   headTags?: string
+  bodyTags?: string
+  bodyTagsOpen?: string
   htmlAttrs?: string
   bodyAttrs?: string
   body?: string

src/utils/html.ts

@@ -34,17 +34,29 @@ const containerRE = new RegExp(
   `<div id="${containerId}"([\\s\\w\\-"'=[\\]]*)><\\/div>`
 )
 
+const bodyTagsOpenRE = new RegExp(`(${containerRE.source})`)
+
 type DocParts = {
+  headTags?: string
+  bodyTags?: string
+  bodyTagsOpen?: string
   htmlAttrs?: string
   bodyAttrs?: string
-  headTags?: string
   body?: string
   initialState?: string
 }
 
 export function buildHtmlDocument(
   template: string,
-  { htmlAttrs, bodyAttrs, headTags, body, initialState }: DocParts
+  {
+    headTags,
+    bodyTags,
+    bodyTagsOpen,
+    htmlAttrs,
+    bodyAttrs,
+    body,
+    initialState,
+  }: DocParts
 ) {
   // @ts-ignore
   if (__DEV__) {
@@ -59,10 +71,18 @@ export function buildHtmlDocument(
     template = template.replace('<html', `<html ${htmlAttrs} `)
   }
 
+  if (bodyTagsOpen) {
+    template = template.replace(bodyTagsOpenRE, `${bodyTagsOpen} $1`)
+  }
+
   if (bodyAttrs) {
     template = template.replace('<body', `<body ${bodyAttrs} `)
   }
 
+  if (bodyTags) {
+    template = template.replace('</body>', `${bodyTags}</body>`)
+  }
+
   if (headTags) {
     template = template.replace('</head>', `\n${headTags}\n</head>`)
   }

src/vue/entry-server.ts

@@ -3,7 +3,7 @@ import { renderToString } from '@vue/server-renderer'
 import { createRouter, createMemoryHistory, RouteRecordRaw } from 'vue-router'
 import { getFullPath, withoutSuffix } from '../utils/route'
 import { addPagePropsGetterToRoutes } from './utils'
-import { renderHeadToString } from '@vueuse/head'
+import { renderSSRHead } from '@unhead/ssr'
 import coreViteSSR from '../core/entry-server.js'
 import type { SsrHandler } from './types'
 
@@ -71,11 +71,13 @@ export const viteSSR: SsrHandler = function viteSSR(
 
     const {
       headTags = '',
+      bodyTags = '',
+      bodyTagsOpen = '',
       htmlAttrs = '',
       bodyAttrs = '',
-    } = head ? renderHeadToString(head) : {}
+    } = head ? await renderSSRHead(head) : {}
 
-    return { body, headTags, htmlAttrs, bodyAttrs }
+    return { body, headTags, bodyTags, bodyTagsOpen, htmlAttrs, bodyAttrs }
   })
 }
 

src/vue/types.ts

@@ -5,7 +5,7 @@ import type {
   RouterOptions,
   Router,
 } from 'vue-router'
-import type { HeadClient } from '@vueuse/head'
+import type { Unhead } from '@unhead/schema'
 import type {
   Meta,
   Renderer,
@@ -29,7 +29,7 @@ export interface Options extends SharedOptions {
 }
 
 type HookResponse = void | {
-  head?: HeadClient
+  head?: Unhead<any>
 }
 
 export interface Context extends SharedContext {}