fix: css inject during SSR dev, replace @vueuse/head with @unhead/vue, use unbuild instead of rollup (#2)

Author: yooouuri

.gitignore

@@ -2,3 +2,4 @@
 node_modules
 pnpm-debug.log*
 dist
+.idea

.nvmrc

@@ -1 +1 @@
-18
+20

README.md

@@ -6,7 +6,7 @@ Vite plugin to develop Vue SSR apps
 * Vue Router
 * State management
 * Teleports
-* Document head management (powered by [@vueuse/head](https://github.com/vueuse/head))
+* [Unhead](https://unhead.unjs.io) support
 
 ## Quick Setup
 

build.config.ts

@@ -0,0 +1,22 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    {
+      input: './src/index.ts',
+      outDir: './dist',
+    },
+    {
+      input: 'src/plugin/index.ts',
+      outDir: 'dist/plugin',
+    }
+  ],
+  externals: ['express', /@unhead/],
+  clean: true,
+  declaration: true,
+  rollup: {
+    esbuild: {
+      minify: true,
+    },
+  },
+})

example/package.json

@@ -10,7 +10,7 @@
     "build:server": "vite build --ssr src/main.ts --outDir dist/server"
   },
   "dependencies": {
-    "@vueuse/head": "^1.3.1",
+    "@unhead/vue": "^1.8.9",
     "cookie-parser": "^1.4.6",
     "express": "^4.18.2",
     "pinia": "^2.1.7",

example/src/App.vue

@@ -1,3 +1,17 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue'
+
+useHead({
+  title: 'Example app, using vite-plugin-vue-ssr'
+})
+</script>
+
 <template>
-  <router-view></router-view>
+  <RouterView />
 </template>
+
+<style>
+body {
+  background: yellow;
+}
+</style>

example/src/main.ts

@@ -1,6 +1,5 @@
 import { vueSSR } from 'vite-plugin-vue-ssr'
 import { createPinia } from 'pinia'
-
 import App from '@/App.vue'
 
 const Counter = () => import('@/Counter.vue')

package.json

@@ -13,20 +13,20 @@
   },
   "exports": {
     ".": {
-      "import": "./dist/index.js",
+      "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
     "./plugin": {
-      "import": "./dist/plugin/index.js",
+      "import": "./dist/plugin/index.mjs",
       "types": "./dist/plugin/index.d.ts"
     }
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -w -c",
+    "dev": "unbuild --stub",
+    "build": "unbuild",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
@@ -41,24 +41,20 @@
     "@babel/types": "^7.23.3",
     "@nuxt/devalue": "^2.0.2",
     "@types/express": "^4.17.21",
-    "@unhead/schema": "^1.8.3",
     "cheerio": "1.0.0-rc.12",
     "cookie-parser": "^1.4.6"
   },
   "devDependencies": {
     "@types/node": "^18.18.9",
-    "@vueuse/head": "^1.3.1",
-    "esbuild": "^0.17.19",
-    "rollup": "^3.29.4",
-    "rollup-plugin-dts": "^5.3.1",
-    "rollup-plugin-esbuild": "^5.0.0",
+    "@unhead/vue": "^1.8.9",
     "typescript": "^5.1.6",
+    "unbuild": "^2.0.0",
     "vite": "^5.0.0",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5"
   },
   "peerDependencies": {
-    "@vueuse/head": "^1.3.1",
+    "@unhead/vue": "^1.8.9",
     "vite": "^5.0.0",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5"